[Support request] Primary Navigation Issues

Home Forums Support Primary Navigation Issues

Viewing 8 posts - 1 through 8 (of 8 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 🙂

    #1313341
    Michelle

    Hi David, I don’t think it would be part of the button. It would be an icon that displays on mobile in the header instead of the desktop button. e.g. top left corner. Have seen it on quite a few sites. Here’s an example (check on mobile): https://kingkong.com.au/ Please let me if you have any idea how to achieve it. Thanks

    #1313783
    David
    Staff
    Customer Support

    aah ok. This would be my approach.

    1. In Customizer > Layout > Header – enable Mobile Header and give it a mobile logo, this will provide us a mobile specific element to adapt.

    2. Create a new Hook element in Dashboard > Appearance > Elements

    2.1 Add this to the text area in the hook ( be sure to update the tel+ ):

    <a class="mobile-call-button" href="tel:+12345678">
    <svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg>
    </a>

    2.1 Select inside_mobile_header hook from the hook list.

    2.2 on Display Rules – select Entire Site.

    Once its in place i can provide some CSS to style the mobile header to suit.

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