[Resolved] Nav Button in Mobile Menu

[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

[David]

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?

[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

[David]

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

[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

[Leo]

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 🙂

[Martin]

Thanks Leo – that’s done it. Cheers.

[Leo]

No problem 🙂

[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

[David]

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;
    }
}

[Martin]

Thanks David. Appreciate your help. Cheers Martin.

[David]

You’re welcome

[Author]

Posts