[Resolved] Primary and Secondary menu problems

[Sílvia]

Hello!
I’m struggling with some menus’ problems I have and I can’t solve it.
I have read and tried to implement some changes I have read in some other posts but, at least, nothing seem to be the prefect choice to me as, when I manage the menus’ laptop view, I realize they are not responsive or I don’t get them the way I need on a mobile device.
This is how I’d like the header to be seen on laptop:
Logo centered, Main menu floating left, Secondary menu floating right (I’d like to add a shopping cart and a search icon here)
This is how Id’ like the header to be seen on mobile:
Logo centered, Main menu as a burger on the right side (float right), Secondary menu (with a shopping cart and a search icon) centered below de logo.

Is this possible?
Thanks in advance,
Silvia

[David]

Hi there,

can you share a link to your site so i can see you current layout.

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

[Sílvia]

https://pertutorroella.com/

[Leo]

This is how I’d like the header to be seen on laptop:
Logo centered, Main menu floating left, Secondary menu floating right (I’d like to add a shopping cart and a search icon here)

Is there a reason why you need to use two menus here?

Have you tried this solution?
https://docs.generatepress.com/article/centering-logo-navigation/

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

[Sílvia]

Yes, Leo, I’ve tried this too several times and undid it as well because the logo appears very small on mobile.
Now I’ve done it again so you can see it.
Besides this, I’d like the logo to be separated from the menu (more space left and right). I’d like the menu to be aligned left and right with the content part (does it make sense?).
You can check what I’ve done here:
https://pertutorroella.com/

[Leo]

Let’s try to solve one issue at a time.

For the desktop issue, can you try adding this CSS as well?

.main-navigation .main-nav {
    flex: 1;
}

Let me know 🙂

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

[Sílvia]

Ok, Leo. This is perfect!
Now I need to solve the extremly small size of the logo on mobile devices. Any idea?

Thanks,
Sílvia

[David]

You can use this CSS:

.site-logo.mobile-header-logo {
    top: 5px;
}
#mobile-header .site-logo.mobile-header-logo img,
#mobile-header {
    height: 100px;
}

Adjust the height value to suit

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

[Sílvia]

Great! Thanks a lot for your help.
Have a nice weekend,
Sílvia

[David]

You’re welcome

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

[Author]

Posts