Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 21, 2018 at 10:42 am #944870
    yampieters

    hello, on my site the main menu will use the next line to display itself if the site is visited on a small screen.
    is there a possibility to avoid this, so, to make te main menu act responsive and stay on one line?

    • This topic was modified 6 years, 8 months ago by yampieters.
    April 23, 2018 at 6:14 am #945244
    Nikko

    Hey jelle,

    That’s difficult to do with the length of the words in the menu items, I would suggest hiding it and using the burger menu instead before the menu goes to the 2nd line.

    @media only screen and (max-width:1279px) {
  .responsive #top #header #header_main_alternate {
    display: none;
  }

  #top #header .av-logo-container .main_menu {
    display: block;
  }

  #top #header .logo a {
    display: flex;
    align-items: center;
  }

  #top #header .av-logo-container .main_menu li {
    display: block;
  }

  #top #header .av-logo-container .main_menu li#menu-item-search a {
    border: 0 !important;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    April 23, 2018 at 8:40 am #945295
    yampieters

    thanks nikko,
    i can see that, if the screen gets smaller, the headerpicture just loses a part of the image. thats oke, thats no problem.
    but, aint there a way not to cut off, but to keep the whole header in whole , and just shrink the whole thing considering it ONE element, (so the menu and the logo and the background image is just ONE component and therefor scalable) , so the menu would never use two lines?
    (OR, and thats also fine, consider only the menu as ONE component, so it would shrink)

    if this could not be done, another option would be to tell the system: “show me the Menu for MObile as soon as the screen is smaller than 1280 px” (as i noticed that sthe point where the menu goes from one to two lines (if width is 1024 px its using two lines)).
    (maybe this is what your code is about, but if i test it on Screenfly on a 1024px-setting i still see two lines and not the Mobile menu).

    April 24, 2018 at 3:41 am #945644
    Nikko

    Hi yampieters,

    I don’t think shrinking it to keep it in one line is a good solution since it will also affect the readability of your menu text.
    As for the code I gave, yes you’re right the purpose of it was to have the burger menu appear and hide the desktop main menu when in screen sizes 1279px and below, I did check your site again with chrome and it does work well even just resizing the browser or checking with ipad. The only thing I noticed was the search icon is already dropping below at 1340px, so please change this part of the code I gave:

    @media only screen and (max-width:1279px) {

    with:

    @media only screen and (max-width:1340px) {

    Clearing browser cache might also help, so the new css code is also fetched.

    Best regards,
    Nikko

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