Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1405921

    Hi.
    I’ve put this in quick CSS:
    @media only screen and (max-width:1500px) {
    .responsive #top .av-main-nav .menu-item {
    display: none;
    }
    .responsive #top .av-main-nav .menu-item-avia-special {
    display: block;
    }}

    This activate the hamburger-menu below width 1500px, but only when scrolling down. I want the same header/menu for 990-1500px as it out of the box is for 0-989px.
    Thanks
    OPVAB

    #1405979

    Hey opvab,

    Could you post a link to where we can see the results you are getting please?

    Best regards,
    Rikard

    #1406160

    Hi.
    Address in PC. I want the same hamburger-menu from 0-1500px.

    #1406230

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1500px) {
    .av-burger-menu-main {
      display: block;
    }
    
    av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after {
      background-color: #c9c9c9;
    }
    }

    Best regards,
    Rikard

    #1406313

    Thanks.
    Together with my above custom CSS, it worked. I have different color sections that I want to show/hide, depending if it’s @media only screen above or below 1500px. The two sections have unique custom css classes. I’ve manage to hide one section with:

    @media only screen and (max-width: 1500px) {
    .mobile {
    display: none !important;
    }

    I thought that below css would hide the other color section for @media only screen above 1501px, but it doesn’t:

    @media only screen and (min-width: 1501px) {
    .desktop {
    display: none !important;
    }

    #1406371

    Hi,

    Thanks for the update. I see that you are missing curly brackets at the end of both media queries, maybe that is the problem?

    Best regards,
    Rikard

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