Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 7, 2018 at 10:04 pm #909434
    spidercreations

    Apologies, but I’m having issues working out the breakpoint for the menu. Lots of items at the top-level.
    Tried a few previously-suggested snippets of code, but they are not working.
    Link to site in the Private Content section.
    Thanks much,
    Steve

    February 8, 2018 at 4:29 am #909552
    Nikko

    Hey spidercreations,

    Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:1124px) {
  #avia-menu .menu-item {
    display: none;
  }

  #avia-menu .av-burger-menu-main {
    display: block;
  }
}

    Hope this helps.

    Best regards,
    Nikko

    February 8, 2018 at 1:53 pm #909761
    spidercreations

    Interesting. Note the code did not work when I put it into the style.css file for the theme. (Using a child theme.)
    Placed in the General Styling section, it works, BUT.
    At one break point the hamburger menu displays under the logo and left justified, then at another break point the header goes transparent and the menu is right justified as expected.
    Can we just get the hamburger menu to stay right justified?
    Thank you!
    Steve

    February 9, 2018 at 4:55 am #910099
    Rikard

    Hi Steve,

    Please try the following CSS as well:

    @media only screen and (min-width: 990px) and (max-width: 1124px) {
#avia-menu {
  width:auto !important;
  float:right: !important;
}
}

    Best regards,
    Rikard

    February 9, 2018 at 3:21 pm #910282
    spidercreations

    Thank you for the reply. To clarify, I’m now using this code in the Enfold Quick CSS

    ‘@media only screen and (max-width:1124px) {
    #avia-menu .menu-item {
    display: none;
    }

    #avia-menu .av-burger-menu-main {
    display: block;
    }
    }

    @media only screen and (min-width: 990px) and (max-width: 1124px) {
    #avia-menu {
    width:auto !important;
    float:right: !important;
    }
    }’

    The same issue is happening. Note that I do have some CSS in the style.css for the child theme. It is…

    ‘/* For the ALB, just hide an element using this. Remember do not us . in the ALB setting */
    .hidethis { display: none !important; }

    /*This is a fix for the Event map being too narrow on the Event page.*/
    .single-tribe_events .tribe-events-venue-map { width: 100% !important;}

    /* Let’s ditch the fancy ampersand */
    .special_amp {
    font-family: inherit;
    font-style: normal;
    font-size: inherit;
    line-height: inherit;
    font-weight: bold;
    color: inherit!important;
    }’

    So I’m not sure if there is a conflict? (I don’t think so.)

    I generally try to use the style.css file for the child theme CSS. Should I be using Quick CSS instead? I seem to have occasional issues where changes work in Quick CSS, but are ignored in the Child Theme CSS.
    Steve

    February 9, 2018 at 4:04 pm #910297
    Nikko

    Hi,

    Just to answer this question:

    Note the code did not work when I put it into the style.css file for the theme. (Using a child theme.)
    Placed in the General Styling section, it works, BUT.

    The reason it works in Quick CSS and not in style.css is because of browser caching or if there’s a caching plugin active which prevents the fetching of the updated (external) css and instead uses the old css cached in the browser.

    Can you try to replace this css code:

    ‘@media only screen and (max-width:1124px) {
#avia-menu .menu-item {
display: none;
}

#avia-menu .av-burger-menu-main {
display: block;
}
}

@media only screen and (min-width: 990px) and (max-width: 1124px) {
#avia-menu {
width:auto !important;
float:right: !important;
}
}’

    with:

    @media only screen and (max-width:1124px) {
  #avia-menu .menu-item {
    display: none;
  }

  #avia-menu .av-burger-menu-main {
    display: block;
  }

  #avia-menu {
    width:auto !important;
    float:right: !important;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    February 9, 2018 at 4:22 pm #910305
    spidercreations

    Thank you, but still experiencing the same issue. Cleared browser cache and I also tried Firefox and Safari. (All Mac stuff.)
    I appreciate your efforts. Maybe it has to do with the header setup or background video?

    Thank you again,
    Steve

    February 9, 2018 at 5:52 pm #910324
    Nikko

    Hi Steve,

    Hmm, I don’t think it’s because of the video, can you try to replace the code I gave to this one:

    @media only screen and (max-width:1124px) {
  #avia-menu .menu-item {
    display: none;
  }

  #avia-menu .av-burger-menu-main {
    display: block;
  }

  #avia-menu {
    width:auto !important;
    float:right: !important;
  }

  .responsive #top #wrap_all .main_menu {
    top: 0;
    height: 80px;
    left: auto;
    right: 0;
    display: block;
    position: absolute;
  }

  #header_main_alternate {
    display: none;
  }
}

    Hopefully this should fix it. :)

    Best regards,
    Nikko

    February 9, 2018 at 5:58 pm #910328
    spidercreations

    That works. Thanks again Nikko. Much appreciated.
    Steve

    February 9, 2018 at 6:41 pm #910357
    Nikko

    Hi Steve,

    You’re always welcome :) We’re happy to help. Let us know if you need further assistance or if we can close this thread :)

    Best regards,
    Nikko

    February 9, 2018 at 7:58 pm #910383
    spidercreations

    You can close. Thanks!

    February 10, 2018 at 7:11 am #910492
    Rikard

    Hi,

    Thanks for letting us know. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Breakpoint for navigation menu’ is closed to new replies.