CODEWITHSUNDEEP
css
ritmanis
ritmanis

Reputation: 95

How can I get the website menu bar to stay in one line?

I am building a site, and hanged on a problem. I positioned the menu bar perfectly, but for some reason on bigger display resolutions or android devices the Contact Us menu item tends to jump to a new line. The link of the web page is http://uk.delux.lv Just try to zoom it and see what happens. This is the css for menu:

#topmenu_wrap {
    margin:auto;
    overflow: auto;
    background: #fff;
}

#topmenu {
    background-color: #fff;
    width:966px;
    margin:auto;
    padding-left: 0px;
    font-family: 'Droid Sans', sans-serif; font-weight: 400;
    font-size: 13px;
    color: #969696;
}

Upvotes: 0

Views: 835

Answers (1)

Henesnarfel
Henesnarfel

Reputation: 2139

What I suggest is to set the padding of the a tags in the ul>li to padding: 16px 15px. Set the total width of the topnav>ul with class menu to width: 966px.

You are not going to be able to control the width of the text on the topnav unless you make them images. That will allow the text to remain the same no matter how far the user zooms or the size they set the text in their browser.

I thought I found somewhere a while ago a way to set the text as static so when someone zoomed nothing happened but I can't find it.

As far as making it expand I wouldn't do that. You aren't going to be able to control every persons browser and the way it looks. Where I work we only check a normal view in the 5 major browsers and if they change something on their end then oh well.

Upvotes: 1

Related Questions