Vertical alignment logo, top menu and hamburger menu

Hello,
I am using sydney for my website: www.brouwerijnuenhem.nl

What I would like to achieve is that:

  • the main menu is always vertically aligned with the logo
  • the hamburger menu is always vertically aligned with the logo

What I have done until now is that I used the following CSS to move the menu down a bit, but the effect of this is not the same for different window-sizes.

/* vertically align menu with logo (move down a bit)/
nav#mainnav {
margin-top: 12px;
}
/
change color of mobile hamburger menu and move down a bit*/
.btn-menu {
color: white;
padding: 8px !important;
}

Is there a solutions that works for all window-sizes?

Regards,
Ryan

Hello Ryan,

I suggest you to fine-tune your code with CSS Media Queries on some of the main Sydney breakpoints, such as 1024px, 991px, 767px, 479px, etc. You can find them all in Sydney style.css at the bottom in Media Queries section.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Dear Ryan,

Thank you for getting in touch here.

Try to apply the following CSS code:

/* Mobile menu button */

.btn-menu {
  padding: 0 !important;
}  

@media only screen and (max-width:1024px){
  
  .header-wrap .container{
    position: relative;
    padding-top: 0; 
  }
  
  .header-wrap .col-md-8{
    height: 50%; 
    position: absolute;
    top: 0;
    right: 0;   
  }
  
  .btn-menu {
    position: absolute;
    bottom: -14px;
    right: 15px;
  }  
  
}



/* Desktop menu */

@media only screen and (min-width:1025px){
  
  #mainnav{
    margin-top: 4px !important;
  }
  
}


@media only screen and (min-width:1200px){
  
  #mainnav{
    margin-top: 12px;
  }
  
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hi Kharis,
thank you for your response.

I have tried to integrate your input into custom css.
I am pretty happy with the result, but:

  • When I look at the website on my mobile device in landscape mode then the logo is not aligned on the left but somewhere in the middle. Can this be changed?
  • I somehow messed up the menu layout in desktop view: menu items are now being spread over multiple lines…

Can you point me into the right direction?
Thanks in advance!

This is what my custom css code now looks like:

/* HEADER SECTION -------------------------------------------------------------/
/
menu on front page is sticky but should be sticky on all other pages as well */
.site-header.fixed {
position: fixed !important;
}

.site-header.float-header{
padding: 0px !important;
}

.admin-bar .site-header.float-header {
top: 32px !important;
}

/* MOBILE phone /
/
Position hamburger menu button on the right of the logo instead of beneath /
@media only screen and (max-width: 991px){
.site-header .col-md-4.col-sm-8.col-xs-12 {
width: 83.3%;
}
.site-header .col-md-8.col-sm-4.col-xs-12 {
width: 16.6%;
}
.btn-menu {
position: absolute;
bottom: -30px;
right: 15px;
}
/
Choose smaller logo /
.site-logo {
max-height: 30px;
}
/
now that menu is on the right: avoid menu texts to fall off screen */
#mainnav-mobi {
left: -250px;
width: 290px;
}
}

@media only screen and (min-width: 1025px){
/* Decrease menu header height */
.site-logo {
max-height: 80px;
}

/* vertically align menu with logo (move down a bit) */
nav#mainnav {
margin-top: 12px;
}

.site-header .col-md-4.col-sm-8.col-xs-12 {
width: 83.3%;
}
.site-header .col-md-8.col-sm-4.col-xs-12 {
width: 16.6%;
}
}

1 Like

Hello there,

> When I look at the website on my mobile device in landscape mode then the logo is not aligned on the left but somewhere in the middle. Can this be changed?

Try to apply the following CSS code:

@media only screen and (max-width:767px){
  
  .header-wrap{
    text-align: left;
  }
  
}

> I somehow messed up the menu layout in desktop view: menu items are now being spread over multiple lines…

Remove the following lines which are placed within @media only screen and (min-width: 1025px) media query:

.site-header .col-md-4.col-sm-8.col-xs-12 {
width: 83.3%;
}
.site-header .col-md-8.col-sm-4.col-xs-12 {
width: 16.6%;
}

Regards,
Kharis

Hi Kharis,
you are great
thank you!

Just one more question: you have chosen max-width:767px instead of the current max-width:991 that I am using for some other settings. Why is that?

Regards,
Ryan

Hello there,

Because the logo got forced to the middle at 767px and below. By default, there is the following CSS code in the style.css file; be placed within @media only screen and (max-width: 767px) media query.

.header-wrap {
    text-align: center;
}

Regards,
Kharis

hi there,

i had tried the code in this post to align the logo to the left while the hamburger menu to the right,

the problems are, the logo is still aligned in the middle and the sub-menu block both the logo and the hamburger menu,

the code I pasted in the child theme :

/* Mobile menu button */

.btn-menu {
padding: 0 !important;
}

@media only screen and (max-width:1024px){

.header-wrap .container{
position: relative;
padding-top: 0;
}

.header-wrap .col-md-8{
height: 50%;
position: absolute;
top: 0;
right: 0;
}

.btn-menu {
position: absolute;
bottom: -14px;
right: 15px;
}

}

/* Desktop menu */

@media only screen and (min-width:1025px){

#mainnav{
margin-top: 4px !important;
}

}

@media only screen and (min-width:1200px){

#mainnav{
margin-top: 12px;
}

any clue?

thanks!

hi there,

problem solved,

thanks

This Code is really very good, to control the alignment of the hamburger button left/Right
i was looking for it long back. i suggest to add it as feature on menu customization

Thanks a lot Kharis

Hi Yaso,

Thank you for your recommendation.

I will pass this to our development team to see. If they can see its fit, I believe it will be added in the future versions.

Regards,
Kharis
aThemes Support