Docs

[fderooy]

Hi there!

After following instructions and adding code from different articles here in the forum, I’ve managed to achieve a header for my site that shrinks when scrolling down, and also adjusts the position and size of the logo at the same time. As you can see, the navbar goes from stacked to inline when scrolling down. I’ve also enabled a superfly lateral menu on my site. This two features are working almost perfectly, but now I need some final touches to make them awesome:

1. I’d like to adjust the top padding of the menus in the navbar in its inline mode (that is, the navbar displayed once you scroll down), so the menus appear vertically centered in relation to the small and left version of the logo.

2. I’d also like the superfly button to behave accordingly to the header. It would be amazing if the button could be displayed next to the first item in the navbar when de stacked modality is on (that is, left to the “SOCIoLOGXS” menu item), and then left to the shrunk version of the logo when the inline modality goes on at scroll down.

Don’t know if I explained myself well enough… hope I did.

As usual: thanks in advance for all your help! 🙂

Fidel

[Rupok]

Hi Fidel,

Thanks for writing in!

#1. You can add this under Custom > CSS in the Customizer.

.masthead-inline .desktop .x-nav {
  margin-top: 10px;
}

#2. It would be a bit complex to manage since the Superfly is in different container and uses absolute positioning. It might work unexpected if you try to modify the behavior.

Thanks!

[Author]

Posts