Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #245722

    Here I am once again,

    Here my site:

    If you open the site on a computer, with maximized screen you see the menu items from left to right.
    Starting with “home” all the way to “contact”.

    If you resize the window (mimic a smaller screen) then at one point the boxed content gets smaller.
    At that point my menu is messed up: contact appears underneath home.

    If I make the screen even smaller, then the menu is sitched to a “combo box”.

    How do I change the the site so the menu shows normal only in maximized screen. All other screen sizes the menu should be collapsed into the combobox.

    See this image for more info:

    Thanks in advance!

    This reply has been marked as private.


    The select box just replaces the menu on very small screens. I recommend to adjust the space between the menu items with media queries – by going this way you can avoid the “line break”. Add this code:

    @media only screen and (min-width: 783px) and (max-width: 989px){
    #top .main_menu ul:first-child > li > a {
    padding: 0 6px;

    to the custom.css file or insert it into the quick css field.



    It took some time for me to understand your explain but now I see what it does: exactly what I meant. So thanks very much!

    I understand you change the padding when the screen does become smaller.

    Could you explain in “readable words” how I should interprate the code? I mean does it say this:
    if the screen width size is bigger than 782px en less than 990px then set padding to 6px?

    Thanks again,



    Glad it works.

    Yes, you are correct. We can also put it this way, if the screen size is between 782px and 989px, set the padding to 6px. More info on this link:


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.