[Resolved] Site title align with the primary menu text

[Michael Mancini]

Hi,

That works except for the padding-top. The big problem for me is when you get the customizer/primary navigation/menu item height set right so that the site title and nav menu line up, when it goes sticky it is way too narrow. A menu item height setting for sticky is needed.

Michael

[Leo]

Setting the sticky navigation height is on the road map.

For now this should work: https://generatepress.com/forums/topic/change-height-primary-menu-when-sticky/#post-175830

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael Mancini]

Hi,

That worked except the site title is not centered and is at the top of the nav bar. Take a look https://audiopassion.net/

Michael

[Leo]

Can you try the adjusted code here? https://generatepress.com/forums/topic/site-title-align-with-the-primary-menu-text/#post-312451

Please replace everything as I made a syntax error before. Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael Mancini]

Leo,

OK. That works. Now I see that works great on desktop but if I pick sticky for both the site title still floats left. Is there a way for it to center on mobile.

Thanks,
Michael

[Leo]

Title looks centered from my phone?
https://s28.postimg.org/u8fdvl0hp/IMG_5476.png

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael Mancini]

Try scrolling up.

Michael

[Leo]

the sticky navigation wasn’t activated the last time I tried it.

Try this CSS now:

@media (max-width: 768px) {
    .menu-site-title {
        float: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael Mancini]

Didn’t work.

[Leo]

Adjusted the code a bit. Can you give it another shot?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael Mancini]

Nice!
Michael

[Leo]

Adjusted above: https://generatepress.com/forums/topic/site-title-align-with-the-primary-menu-text/page/2/#post-313637

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael Mancini]

Leo,

That works. Thanks for your help. I can save this as a blueprint and use it when I need to until you guys put it in the customizer. If I use transitions to sticky will I have to adjust the code?

Michael

[Leo]

I think so. Give it a shot.

If not then this post gives you both method:
https://generatepress.com/forums/topic/site-title-align-with-the-primary-menu-text/#post-309439

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael Mancini]

Hi Guys,

Now that GP Premium has a Menu Item Height adjustment in Layout/Sticky Navigation (cool!) It looks like I have to delete this CSS:

.main-navigation.is_stuck .main-nav ul li a {
line-height: 60px;
}

Is there anything else I need to change within the CSS or code snippet you detailed in this post? Just double checking.

Thanks,
Michael

[Author]

Posts