Extra block above logo

  • Resolved ariextreme

    (@ariextreme)


    3 years, 8 months ago

    Hi everyone,

    I hope someone is able to provide some tips since I need to make a row above the logo in twentytwenty one. In this I would like to add the link to the login screen and language flags. This must be visible on all screens (desktop, tablet and mobile).

    I believe I need to put code in the ‘site-branding.php’ file but failing to get it work. Any this would be much appreciated.

    Thanks,

    The page I need help with: [log in to see the link]

Viewing 7 replies - 16 through 22 (of 22 total)
  • Thread Starter ariextreme

    (@ariextreme)

    Hi Oliver,

    That is correct. I disabled the widget temporarily since it does not give a good user experience I will swith it on now for today so I hope you can see it.

    Best,

    This should do what you want …

    #header-sidebar {
width: 100%;
padding: 0;
display: block;
border-top: 0;
}
#header-sidebar .widget-area > * {
margin: 0;
text-align: right;
}
@media only screen and (max-width: 481px) {
.primary-navigation {
top: 30px;
}
}

    Oliver

    Thread Starter ariextreme

    (@ariextreme)

    Hi Oliver,

    Thank you but it’s not yet as we want I think. At mobile the flags are covering the logo and text is below the logo. Looks like a kind over layer over the normal layer. Please have a look yourself at the site.

    • This reply was modified 3 years, 8 months ago by ariextreme.

    Sorry, there’s a space in there where there shouldn’t be in #header-sidebar.widget-area. Please use this instead …

    #header-sidebar {
width: 100%;
padding: 0;
display: block;
border-top: 0;
}
#header-sidebar.widget-area > * {
margin: 0;
text-align: right;
}
@media only screen and (max-width: 481px) {
.primary-navigation {
top: 30px;
}
}
    Thread Starter ariextreme

    (@ariextreme)

    Thank you Oliver, this looks much better right now. Will study your code since there is a lote to learn for me.

    On mobile, the flags are now at the same high as the logo. Consequently the menu drops a bit but that looks great.

    On wider screens, the flags are higher then the logo what was the initial question. Now I have seen the mobile screen I am wondering if the flags could align with the top of the logo as well. Like as it is on mobile screens.

    Sure, try this instead …

    #header-sidebar {
width: 100%;
padding: 0;
display: block;
border-top: 0;
}
#header-sidebar.widget-area > * {
margin: 0;
text-align: right;
}
@media only screen and (max-width: 481px) {
.primary-navigation {
top: 30px;
}
}
@media only screen and (min-width: 482px) {
#header-sidebar {
position: absolute;
top: 10px;
}
}

    Oliver

    Thread Starter ariextreme

    (@ariextreme)

    Thanks again Oliver. This looks good now. I changed the flags into text since that helps to keep the site as fast as possible.

Viewing 7 replies - 16 through 22 (of 22 total)
  • The topic ‘Extra block above logo’ is closed to new replies.