Color menu bar and center

julesk770 · April 2015

Hi

Is it possible to put a background color on just the menu bar. When I try it colors the whole header area. If I do get color on the menu bar it places a margin of about 30px each side of the colored area/container.

Also - is it possible to center the menu whilst having the bar full width?

Thanks

Julian

Albert · April 2015

Hi Julian,

this should be possible but not with all header styles. If you will send us url to page where you want to do this, we can have a look on it.

Thanks!

julesk770 · April 2015

Dont worry - I have solved it - thanks!

jimosulli · July 2015

Hey @muffingroup I'm having the same issue and it's driving me crazy. http://www.lanaloves.co.uk/?page_id=2

Albert · July 2015

@jimosulli Can you explain what you mean exactly? Because as we see, all looks fine on your site. We did not noticed anything wrong.

singcat · July 2015

Hello,

How to change default menu to be backgrounded color as http://www.lanaloves.co.uk/?page_id=2 ?

Regards

Albert · July 2015

@singcat Please show us on screenshot which color you want to change exactly because looks like you already changed background color for menu.

singcat · July 2015

This is mine http://mockup.singcat.com/nomi

Albert · July 2015

@singcat Ok. So to set background color for menu on your site, please use below css:

#Top_bar #menu { background: #000 !important; }

singcat · July 2015

Sorry for miss explanation.
I want to have menu as http://www.lanaloves.co.uk/?page_id=2 with pink color bar.

Kindly gide me..

Thank you,
Singcat

Albert · July 2015

But this is what we already gave you. If you also want to decrease padding and remove those borders between menu items, please use below css:

#Top_bar:not(.is-sticky) .menu { padding: 0 !important; }
#Top_bar #menu { background: #ff828a none repeat scroll 0 0 !important; }
#Top_bar .menu > li > a span:not(.description) { border: 0 !important; }

If you want to change more elements, we recommend to look at http://themes.muffingroup.com/betheme/documentation/#theme-customizations where we described how to do this.

singcat · July 2015

Hello,

Tried to I add csat Custom CSS, but it's failed.
Please see http://mockup.singcat.com/nomi2/home-2/
And this iw what I want to be http://www.lanaloves.co.uk/?page_id=2 ?
We can give you login detail if you wish to see admin section.

Kindly help.

Albert · July 2015

No, we don't need any access because we gave you proper css and we are sure about this. The problem is with your previous css because you got some errors probably. For example we see that you opened tag for media only screen and you did not closed it. We recommend to move this css on 1st position.

jimosulli · July 2015

@singcat this is css I used:

#Top_bar .menu > li > a span:not(.description) { border: 0; }
#Top_bar #menu { background-color: #FF828A !important; }
#Header .menu > li { display: inline-block; float: none;}
#Top_bar .menu_wrapper { text-align: center; width: 100%; }
#Top_bar .top_bar_left { width: 100% !important; }
#Top_bar:not(.is-sticky) .menu_wrapper {
width: 100% !important;
}

jimosulli · July 2015

@muffingroup If you look at the page you will notice that the menu wrapper doesn't fill the box to 100% width, there is a gap of white space between the menu background and the box of the content area. I want it to stretch to the full width of the content area.http://www.lanaloves.co.uk/?page_id=2

Albert · July 2015

@jimosulli Please make a screenshot of which gap you mean because we do not see anything wrong on this page.

jimosulli · July 2015

Albert · July 2015

To remove those empty spaces on sides, please use below css:

#Top_bar .container .column {
    margin: 0;
    width: 100%;
}

#Top_bar .container { width: 1240px !important; }

jimosulli · July 2015

Nope

Albert · July 2015

What? We tested this css and it works on 100%. If does not work for you, it means you did something wrong.

Color menu bar and center

Comments