Sticky navigation bar when resize the browser

Hi all,
i have few problems with Sydney that maybe you can help me out.

  1. When i resize my browser and scroll down, the menu doesnt sticky anymore (and i dont know why because i remember it worked).

  2. i tried to add this css:

@media only screen and (max-width: 1024px){
    .site-header {
        background-color: transparent;
    }
}

because i want it to look just like the original width but its not transparent, it’s just white.

  1. how do i control the menu before scrolling and after? the float menu. (control = styling)

  2. when resizing i get this ‘hamburger’ sign, how do i style it to be in the center of my logo?

Thanks,
Chen

Hello Chen,

Thank you for reaching out to us here.

> 1 & 2

Use this CSS code:


@media only screen and (max-width:1024px) {
  
  .site-header,
  .site-header.fixed {
    position: fixed !important;
    background: transparent;
  }
  
  .site-header.float-header {
    background-color: #000;
  }
  
}

> 3

After scrolling, there is a new class name (.float-header) attributed to the menu bar. So you can use this code:


.site-header.float-header {
  background-color: #000;
}

Before scrolling, you can use this:


.site-header {
  background-color: #000;
}

> 4

You can move the mobile menu position using this code:


@media only screen and (min-width:768px) and (max-width:1024px) {
  
  .btn-menu {
    margin-top: 10px;
  }
  
}

Regards,
Kharis

Hi There,

I love the Syndey theme and I’m getting pretty good at it! There is, however, one issue that I cant seem to solve.

Is there a way to make the nav bar a fixed height? I want the nav section to stay a constant height. In other words, I dont want the height of the bar to change when you scroll up and down.

I’ve searched for an answer but I dont seem to find a solution on the forums.

Thanking you in advance.

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from your site dashboard.


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

Regards,
Kharis

Thanks Kharis

I tried that but it doesn’t seem to have made any difference.

Is there anything else I can try?