[Resolved] Nav Button in Mobile Menu

Home Forums Support Nav Button in Mobile Menu

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #880759
    Martin

    Hi

    I have added a button to the nav bar.

    Is it possible to have this show in the mobile menu as well?

    Many thanks

    Martin

    #880835
    David
    Staff
    Customer Support

    Hi there

    do you want the menu item inside the mobile dropdown to look like a button or in the mobile header itself beside the hamburger menu?

    #880837
    Martin

    Hi David

    Yes, I wanted it to show in the mobile dropdown. I have disabled the links in the desktop and tablet view but I wanted it to be clickable in the mobile version.

    I have added this but it doesn’t work.

    @media (max-width:768px) {
          .main-navigation .main-nav ul li.nav-button a {
            border: 1px solid #34343c !important;
            border-radius: 5px;
            line-height: 35px; 
        }

    Many thanks

    Martin

    #880852
    David
    Staff
    Customer Support

    Check you CSS. The media query you have before that CSS is missing the closing } which is stopping that from working.

    You will need to add some margin: 0 20px 10px; and maybe text-align: center; to make it look more button like

    #881647
    Martin

    🙂 perfect, thank you David.

    Is it possible to add the word ‘Call’ in front of the phone number, just on mobile.

    Thanks again.

    Cheers

    Martin

    #881709
    Leo
    Staff
    Customer Support

    You can try adding 2 buttons, one with the word Call and one without, then use the built-in hide-on classes to hide one on mobile and one on desktop/tablet:
    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    Let me know if this helps 🙂

    #888748
    Martin

    Thanks Leo – that’s done it. Cheers.

    #889517
    Leo
    Staff
    Customer Support
    #890343
    Martin

    Hi

    I have just reapplied this fix – https://generatepress.com/forums/topic/different-logos-on-different-with-sticky/#post-875175

    to deal with the two different logos on the site and it appears to have removed the button styling on the mobile menu.

    The code I am using is

    @media (max-width:768px) {
         .main-navigation .main-nav ul li.mob-nav-button a {
            border: 3px solid #34343c !important;
            margin: 0 60px 20px !important;
            text-align: center;
            border-radius: 5px;
            line-height: 35px; 
        }
    }

    Do I need to change this due to the fix on the menu logo’s?

    Many thanks

    Martin

    #890396
    David
    Staff
    Customer Support

    It’s the first media query that you have that is not closed with } so all other media queries below it are failing. I have cleaned up the CSS and merged the same media querys – so you can replace your simple css with this:

    .menu-toggle {
        font-size: 18px;
    }
    
    @media (min-width:769px) {
        .inside-navigation {
            padding: 0px 40px;
        }
    
        .mbg-service-link a:hover {
            color: #364b9b;
        }
    
        .dt-service-link a:hover {
            color: #a5c723;
        }
    
        .widget-title {
            font-weight: 500;
        }
    
        ::-moz-selection {
            background-color: #364b9b;
            color: #fff;
        }
    
        ::selection {
            background-color: #364b9b;
            color: #fff;
        }
    
        .main-navigation .main-nav ul li.nav-button a {
            border: 2px solid #ffff;
            border-radius: 5px;
            color: #ffff !important;
            pointer-events: none # !important;
            cursor: context-menu !important;
            line-height: 35px;
        }
    
        .main-navigation.navigation-stick .main-nav ul li.nav-button a {
            border: 2px solid #34343c;
            border-radius: 5px;
            color: #34343c !important;
            cursor: context-menu !important;
            line-height: 35px;
        }
    }
    
    @media (max-width:768px) {
        .main-navigation .main-nav ul li.mob-nav-button a {
            border: 3px solid #34343c !important;
            margin: 0 60px 20px !important;
            text-align: center;
            border-radius: 5px;
            line-height: 35px;
        }
    }
    #890732
    Martin

    Thanks David. Appreciate your help. Cheers Martin.

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