Centre the menu

HTML & CSS
1

I wan to centre the main menu on this site using CSS. http://stephanieh57.staging.wpengine.com/
I can not figure out how. I can add extra html if that is necessary

2

Try this…more like a band aid oh. Your media query break-points need some work

#header #navigation ul.nav {
display:block;
margin-left:9%;
}

Think youll need to change

.shop-menu-dot

also… play with the margin-left %.

You will furthermore want to change the media query that shrinks the menu - this happens at around 767px. The way things are (menu dropping to another line) you will need to change the 767px media query to around 1060px or 1115px.

Above is not ideal, but it’s a possible fix without a lengthier rewrite

3

Also you can use:

#header #navigation ul.nav{
margin: 0 auto;
width:85%;
/* float:right;*/

}
4

You can automatically centre it like this:

#header #navigation,
#header #navigation ul.nav{
float:none;
}
#header #navigation ul.nav{
display:table;
margin:auto;
}

Note that ids are unique so there is no need to string more than one of them in your selector. Otherwise you are just wasting code.:slight_smile:

1 Like
5

awesome thanks, simple solution and elegant as usual Paul. I was traveling hence the delay in replying
Another related question. When the menu does not fit it breaks to 2 lines, is it possible to keep the items on the 2nd line centered as well? This site does it http://jumbledonline.com/

6

Use display:block and give padding to anchor tags.

7

Hi, mgason.

You should be able to add {text-align:center} to the unordered list to center the list items.

ul {text-align:center}

Never mind my suggestion. I thought you were talking about the site in message #5. This will not work with the site in message #1.

8

bhagatwebcreation,

What question are you addressing?

9

If you don’t float the list items but use display:inline-block then they should center as long as the nav is text-align:center.

e.g. Something like this.

#header #navigation ul.nav{
display:table;
margin:auto;
text-align:center;
}
#header #navigation ul.nav > li{float:none;display:inline-block}

It still seems to be off a little though but I have to rush out. There may be issues with your drop down code taking up space though so may need tweaking.

.

10

HI Paul,
I have the menu pretty much right. It centers. I removed a left margin on ‘a’ so it fits on one line at full size. Sub menus are-text=aligned left. Last issue seems to be that when it does break to 2 lines the second line of main menu items is not quite centered properly. I cant seem to find what causes that.

11

FYI, to fix the scrollbars you are seeing, the 768media query, these elements need the following styles.

#top, .footer-wrap
{
  box-sizing:border-box;
  width:100%;
}
12

The last list item is taking up space as it was originally display:none. You wil need to hide it also.

#header #navigation ul.nav > li.baba-mobile{display:none}

You will probably want to show it for small screen in your media query but I can’t work out how you are going to handle this as you hide the whole navigation which means the mobile nav will also be hidden.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.