Archived topic

Main navigation mobile view issue

12 replies · Started by Dev on January 15, 2021

Viewing posts 1–13 of 13

January 15, 2021 at 11:58 pm #1620911

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.

January 16, 2021 at 5:52 am #1621130

Hello,

No update on this issue.

January 16, 2021 at 7:17 am #1621366

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

January 16, 2021 at 7:20 am #1621370

So what should I do.

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

January 16, 2021 at 8:19 am #1621446

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

January 16, 2021 at 9:16 am #1621504

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

January 16, 2021 at 9:22 am #1621513

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

January 16, 2021 at 9:29 am #1621519

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.

January 16, 2021 at 4:15 pm #1621816

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!

January 16, 2021 at 8:37 pm #1621927

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

January 17, 2021 at 10:20 am #1622638

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

January 17, 2021 at 10:59 pm #1623027

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.

January 18, 2021 at 9:47 am #1623929

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.

This archived topic is closed to new replies.

Start building better websites today.