Centering menu bar

Tagged: menu

This topic has 17 replies, 6 voices, and was last updated 11 years, 1 month ago by Sakin.

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

Author

Posts
May 17, 2013 at 8:59 pm #9110

dfranck90
Member

I’m working with a Simple Catch child theme. I’m trying to get the menu to center with the page content. I can only get it to float left or right. Is there a way to do this with css?

May 17, 2013 at 9:12 pm #9112

dfranck90
Member

Nevermind. For some reason, I had taken the menu div outside of the layout-978 div. It’s centered now.

May 18, 2013 at 12:15 am #9127

Sakin
Keymaster

@dfranck90: great it’s working for you. Have a nice day.

June 1, 2013 at 12:58 am #9762

Anonymous
Inactive

I actually have the same question, but I’m using the Simple Catch regular theme. Is there a way to center the menu instead of having it lean to the left? (as seen here – http://www.readingforpleasure.net/)

Thanks in advance,
Maria

June 1, 2013 at 10:13 am #9771

Sakin
Keymaster

@MairiaM: Please add back the footer content. You just need to add back “Theme: Simple Catch”. For free them you are not allowed to change the footer theme name. This is the only mean of recognition that we get for providing Theme, Updates, and Support for free. I hope you understand. Please add back and post here, then I will look at your issue.

June 4, 2013 at 12:30 am #9874

Anonymous
Inactive

Hi Sakin, footer content has been fixed. Here’s my question once again:

I actually have the same question, but I’m using the Simple Catch regular theme. Is there a way to center the menu instead of having it lean to the left? (as seen here – http://www.readingforpleasure.net/)

Thanks in advance,
Maria

June 4, 2013 at 12:35 am #9876
Sakin
Keymaster
@MairiaM: Just add the following CSS in “Appearance => Theme Options => Custom CSS” box.
```
#header #mainmenu {
    float: none;
    text-align: center;
}
#header #mainmenu ul li {
    display: inline-block;
    float: none;
}
```
June 4, 2013 at 2:12 am #9884

Anonymous
Inactive

Awesome Sakin! Looks great!

Just one more thing on this (excuse my perfectionist tendencies): Is there any way to add a line in front of my “About” page so that it’s boxed in like the “Contact” page of my menu (http://www.readingforpleasure.net/).

No worries if there’s not, I just figured it couldn’t hurt to ask 🙂

Best,
Maria

June 4, 2013 at 11:59 am #9905

Sakin
Keymaster

@Maria: Yes you can just add the following CSS in “Appearance => Theme Options => Custom CSS” box.
#header #mainmenu ul li.page-item-2 { border-left: 1px solid #ccc; }

June 5, 2013 at 2:00 am #9923

Anonymous
Inactive

Thank you so much Sakin 🙂

Best,
Maria

June 27, 2013 at 6:12 am #11103

rhannah4
Member

Sakin,

I have followed the same directions that you gave to Maria. And my page did not turn out the same

http://www.rashaadhannah.com

#header #mainmenu {
float: none;
text-align: center;
}
#header #mainmenu ul li {
display: inline-block;
float: none;
}
#header #mainmenu ul li.page-item-2 { border-left: 1px solid #ccc; }

June 27, 2013 at 8:27 am #11106

victoria
Member

Is there any way of reducing the menu height?

June 28, 2013 at 12:19 am #11145

Sakin
Keymaster

@victoria: Send me your site URL?

July 23, 2013 at 9:53 pm #12262
dfranck90
Member
I started this thread two months ago because of a mistake that I made, which caused the entire menu bar to shift to the left side of the page. Now that I have time to finish this site, I am trying to do the same thing as Maria.

I tried using the same instructions that you gave her, but
```
#header #mainmenu {
    float: none;
}
```
was pushing the main content area down 10px whenever I hovered over a menu item. Also
```
#header #mainmenu ul li {
        float: none;
}
```
caused all my drop down menu’s to appear on the left side of the page, and not under the parent item.

This is probably being caused by some other CSS that I have added to my child theme, but I am not sure exactly what is. Sakin, if you have any suggestions I would greatly appreciate it.

The site that I’m working on can be found here.

I could try and “fake” centering the items using margins and padding, but I would really prefer to do this the right way.

Thanks,
Daniel
July 23, 2013 at 11:51 pm #12279
Sakin
Keymaster
@dfranck90: I see that you have added lot of css. So, I cannot tack back all. But can you try adding in the following css.
```
#header #mainmenu ul {
    margin: 0;
    padding-top: 2px;
    text-align: center;
}
#header #mainmenu ul li {
    display: inline-block;
    float: none;
    text-align: center;
}
#header #mainmenu ul li a {
    border-bottom: 10px solid #fff;
}
#header #mainmenu ul ul li a {
    border-bottom: none;
}
```
July 24, 2013 at 12:08 am #12284

dfranck90
Member

Yea, I had to heavily edit this theme to fit what my graphic designer wanted to do. I figured it might be overwhelming when you looked at it.

Your suggestions did help though. I’ve got it centered and working properly now after a little tinkering.

Thank you for your help Sakin.

November 12, 2013 at 7:58 am #17103

Cory
Member

I was wondering the same thing. I have Simple Catch pro and would like to do the following on the header:

A. Make the menu centered

B. Put the social icons above the logo

C. Reduce space between logo and the rest of the blog.

I’ve searched a lot of threads with your answers (Sakin) but they just didn’t all work for me. Can you give a noob some help?

The site is http://www.brewreviewcrew.com

Thanks in advance!

November 12, 2013 at 1:11 pm #17123
Sakin
Keymaster
@Cory: Your customization in complex. So, consider hiring customizer. For menu cernter in Simple Catch Pro add the following CSS in “Appearance => Theme Options => Custom CSS” box.
```
#access ul {
    display: block;
    line-height: 0;
    margin: 0;
    text-align: center;
}
#access ul li {
    border: none;
    display: inline-block;
    float: none;
    margin-bottom: 0;
}
#access ul li ul li {
    display: inline-block;
    float: left;
    text-align: left;
    width: 185px;
}
#access ul li.default-menu { 
    display: none; 
}
```
To Put the social icons above the logo, you need to build child theme and add the functions. There is no easy way to do that. Maybe we will add in future version update.

For space, can you specify how much you want to reduce it.
Author

Posts