Docs

[Lyser]

Hello,

Here’s my work

1) How is it possible to have a sticky navbar down the browser like you have here
(big or small browser height, it’s always sticked)

2) How do you put the navbar full width like here again
(I’ve tried to put the page in no container but it doesn’t work)

3) When you resize the browser horizontaly, you can see at a point that the menu is going under the image logo, but it’s not visually correct (the logo on the left and the menu on the right with big black spaces next to them), how can i center both of them when the breaking point comes ?
And also, how can i change the width of breaking point for the menu when it goes to the little icon menu ? (the breaking point arrives too soon, there is enough space for the menu to be displayed)

[Rupok]

Hi there,

Thanks for writing in!

#1. It seems already sticky. If you want to make it sticky for mobile as well, you can add this under Custom > CSS in the Customizer.

.x-navbar.x-navbar-fixed-top {
  position: fixed !important;
}

#2. It would be possible using percentage but you need to use stacked Navbar to get rid of the logo first. Then you need to make the container inside Navbar fullwidth and use percentage for the menu item. Let us know if you need help with the CSS after changing to stacked Navbar.

#3. It’s because the image is larger for the smaller screens. You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 500px) {
.x-brand.img > img {
  max-width: 225px;
}
}

Hope this helps.

[Author]

Posts