[Support request] Main navigation mobile view issue

Home Forums Support Main navigation mobile view issue

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1620911
    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.

    #1621130
    Dev

    Hello,

    No update on this issue.

    #1621366
    David
    Staff
    Customer Support

    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;
        }
    }
    #1621370
    Dev

    So what should I do.

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

    #1621446
    David
    Staff
    Customer Support

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

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

    #1621513
    David
    Staff
    Customer Support

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

    #1621519
    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.

    #1621816
    Leo
    Staff
    Customer Support

    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!

    #1621927
    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

    #1622638
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1623027
    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.

    #1623929
    Tom
    Lead Developer
    Lead Developer

    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.

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