[dfranck90]

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?

[dfranck90]

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

[Sakin]

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

[Anonymous]

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

[Sakin]

@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.

[Anonymous]

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

[Sakin]

@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;
}

[Anonymous]

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

[Sakin]

@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; }

[Anonymous]

Thank you so much Sakin 🙂

Best,
Maria

[rhannah4]

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; }

[victoria]

Is there any way of reducing the menu height?

[Sakin]

@victoria: Send me your site URL?

[dfranck90]

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

[Sakin]

@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;
}

[dfranck90]

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.

[Cory]

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!

[Sakin]

@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