[Resolved] Primary and Secondary menu problems

Home Forums Support [Resolved] Primary and Secondary menu problems

Home Forums Support Primary and Secondary menu problems

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1585574
    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

    #1585726
    David
    Staff
    Customer Support

    Hi there,

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

    #1586101
    Sílvia
    #1586254
    Leo
    Staff
    Customer Support

    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/

    #1586289
    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/

    #1586641
    Leo
    Staff
    Customer Support

    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 🙂

    #1586749
    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

    #1586983
    David
    Staff
    Customer Support

    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

    #1587241
    Sílvia

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

    #1587327
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.