Main navigation mobile view issue

[Dev]

Hello,

I added the button to the menu navigation through this CSS and custom class.

@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
color: #000000;
line-height: 35px; /*this number will likely need to be adjusted*/
}
}

After adding the desktop, the view is fine, but the mobile view is not well. Please see the below screenshot.

http://prnt.sc/wsvcrn

Please note for the hover effect; I also added the below CSS code.

.main-navigation .main-nav ul li.nav-button:hover a {
color: #459285 !important;
}

Please let me know the solution.

[Dev]

Hello,

No update on this issue.

[David]

Hi there,

you have other CSS that is styling the button on smaller screens ie. this:

@media (max-width: 600px) {
    .main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
        color: #ffffff;
        border: 3px solid #66ccaa;
        padding: 8px 18px;
        border-radius: 2px;
        margin-left: 24px;
        transition: all 0.6s ease 0s;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dev]

So what should I do.

Shall I remove the above CSS or what needs to be done?

[David]

Try removing it – then the new styles should apply here to.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dev]

Hello,

I tried to find the below CSS on my site anywhere, but that is not there. What should I do?

@media (max-width: 600px) {
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
color: #ffffff;
border: 3px solid #66ccaa;
padding: 8px 18px;
border-radius: 2px;
margin-left: 24px;
transition: all 0.6s ease 0s;
}
}

[David]

I can’t see where it is coming from when the cache is enabled.
Check in the Customizer > Additional CSS

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dev]

Hello,

Thanks, I find it. And removed it as well, but after removing it button in the mobile view gets disappears.

I had also deactivated the caching on the site.

[Leo]

Where is the button added?

Is it through a menu item?

Please keep your caching plugins disabled if you need further help from us.

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dev]

Hello,

Please see the below two images, which will explain the issue better.

Desktop View: https://prnt.sc/wykjom

Mobile View: http://prnt.sc/wykkuw

[Tom]

Try removing the media query from your CSS, so it looks like this:

.main-navigation .main-nav ul li.nav-button a {
    background-color: #ffffff;
    border: 3px solid #000000;
    color: #000000;
    line-height: 30px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dev]

Hello,

As I’m removing the above CSS mentioned by TOM. Then the border around the image is getting disappeared.

Please see the below image.

http://prnt.sc/x3t1h3

Please let me know.

[Tom]

Are you replacing it with the CSS I provided?

My CSS is the exact same but without the media query around it, which is telling it to only apply on desktop.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts