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

    Here I am once again,

    Here my site: http://to.ly/pO8H

    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: http://goo.gl/9JTOHt

    Thanks in advance!

    #245725
    This reply has been marked as private.
    #246401

    Hi!

    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.

    Cheers!
    Peter

    #252761

    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,

    #253088

    Hi!

    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: http://css-tricks.com/css-media-queries/

    Cheers!
    Ismael

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

You must be logged in to reply to this topic.