CODEWITHSUNDEEP
htmlcssweb
the10thplanet
the10thplanet

Reputation: 27

How can I center a menu in a responsive website? (example)

I am having some grave difficulty to center a silly menu on the pages of my website. I know I can set the width of an outer div to a px value, but how can I make it so it centers for a responsive website? Here's the page:

http://103.4.17.225/~america/index.php/product-menu/vertical-garden/gro-wall-3

The menu is the benefits,gallery,etc.

Thanks guys , you're the bomb.

Upvotes: 1

Views: 96

Answers (2)

Scott L
Scott L

Reputation: 549

First, remove the float from the ul and set it to inline block;

.met_main_nav ul {
    float: none;
    display: inline-block;
}

Then use it's parent (the nav element) to center it, This will center any inline-block elements inside it (i.e the ul):

.met_main_nav {
    text-align: center;
}

Upvotes: 1

Jesus Lugo
Jesus Lugo

Reputation: 796

To center horizontal menus I often use a inline-block approach instead of a float one, try adding this to your stylesheet:

.sidemen .nav { text-align: center }
.sidemen ul li {
    float: none; /* this will override your current line, just for testing */
    display: inline-block;
}

If you add the code into your stylesheet, you can delete your current float rule, and just adding the display one.

The menu will be centered, no mater if you resize the browser, unless you do up to extreme narrow size, in which I'd recommend using media queries to adapt the menu rendering (reducing the margin or adapting styles to show in two lines perhaps).

Upvotes: 1

Related Questions