[Support request] Primary Navigation Issues

Home Forums Support Primary Navigation Issues

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1291669
    Michelle

    Hi, having problems with Primary Navigation position as it overlaps with the Elementor button on a smaller laptop screen.
    On a large screen looks ok.

    Is there a way you could actually include a button option as part of the menu like other themes do? Have wasted a few hours to figure out how to put a button in the primary nav menu. Adding a seperate button from elementor was the best I could come up with.

    I added the code here to Simple CSS but it didn’t do anything. Button to Google
    https://docs.generatepress.com/article/adding-buttons/

    I am not good with code so if there is a way just to space between elementor button and the menu so they don’t overlap would be best.

    Navigation Location and Navigation Position no longer exists within your theme.
    https://docs.generatepress.com/article/navigation-location/

    Sorry I am completely lost and wasted hours upon hours with what is a simple task in other themes.

    If you can please help it would be much appreciated.
    Thanks

    #1291797
    David
    Staff
    Customer Support

    Hi there,

    question – how should that button be displayed on Mobile devices?
    Let me know then i can provide the best solution to make all of it work correctly.

    #1298711
    Michelle

    Hi, probably it will disappear on mobile and I will have a phone icon instead for mobile e.g. top left.
    Do you think it is better to have it in the header to prevent overlapping issues?
    If so, can you please explain in more detail exactly what code I have to add and exactly where.
    Thanks very much

    #1298975
    David
    Staff
    Customer Support

    Right so lets do one at a time. For reference this article explains how to make a Menu item look like a button:

    https://docs.generatepress.com/article/adding-buttons-navigation/

    To save you some time i created the CSS here:

    .main-navigation .main-nav ul li.nav-button a {
    background-color: #e8a240;
        border-radius: 50px;
        font-weight: 700;
        line-height: 40px
    }
    .main-navigation .main-nav ul li.nav-button:hover a {
        background-color: #e88700 !important;
        color: #fff !important;
    }

    In point 1 of that document it explains how to add the nav-button custom class. In the CSS field copy and paste this instead:

    nav-button hide-on-mobile

    Once thats done we can look at adding a call icon in the Mobile Header

    #1309363
    Michelle

    Thanks so much for that. That has worked 🙂
    Do you know how to add the icon to the header & then hide on mobile?
    I may be using the Menu as a header currently or one that came with the theme. There is no Header active under theme builder.
    Thanks

    #1309585
    David
    Staff
    Customer Support

    Is this the phone icon ? Where should it be positioned as part of the button ? Let me know 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.