Header changes

[ten12design]

I am looking to see if you were able to tell me what I need so I can change the header and navigation tabs like the theme I purchased for my client. http://www.kbmfc.com/
I am trying to purchase your them again but need to redesign it to as close as I can to the one I did up in HTML.

[Raghavendra]

To center the logo/menu (hope that’s your requirement) – here is my quick CSS to insert the following into Custom CSS panel in theme options panel –

#site-logo {
display: block;
float: none;
margin: 0 auto;
text-align: center;
width: 172px;
top:20px;
}
#primary-menu {
float: none;
margin: 0 auto;
text-align: center;
display: inline-block;
top: 10px;
}

[cliftoncreate]

I have the same query but when i paste the above code in my CSS Panel i only get the logo but not the menu centred – (menu still justified to left)

[ten12design]

I noticed that myself.

[cliftoncreate]

I’ve tried again with this and if i break the code in two individual styles and input each works separately (logo centres or menu centres) but when combined there’s a conflict making the menu justify to the left

[ten12design]

if you can send me that code so I can try. thanks

[cliftoncreate]

This reply has been marked as private.

[Raghavendra]

Just give this a try –

#header > .inner > .wrap { text-align: center; }

and remove the extra margin-left to center the menu.

[cliftoncreate]

Worked like a charm, cheers 😉

[cliftoncreate]

Hi, although your suggestion worked great i have now noticed that once you scroll down on the page the justification returns back to the original left margin (see attachments) any way around this? Thanks again

[Raghavendra]

Can you give this try in Custom CSS panel and see if that helps? I was not sure you wanted the sticky menu to align that way since it takes up some space.

#header.sticky #site-logo {
	display: block !important;
} 

[ten12design]

When viewed on an android phone and setting the css to the codes I see above mkaes my logo sit on to boarder of the slider and when viewed in firefox on my phone it’s off centered.

[cliftoncreate]

Hi, i’m still getting lots of problems trying to centre everything on my site,
http://www.cliftoncreative.co.uk – i’ve been given a few fixes in the previous posts but still can’t seem to get the site logo, primary menu and page content to all line up – they all appear centred, just now with one another. Is there anything else i can try? Many thanks

PS it looks as tho both the logo and primary menu need to be shifted to the right to get it to line up with the page, slider etc

[Raghavendra]

cliftoncreate – You need to do this to get it all centered (you have WooCommerce enabled) –

#site-logo { 
width: 100px !important; 
} 
.woocommerce-site #primary-menu {
right: 0 !important; 
}

Wrap the text that starts with “Hey there, thanks for stopping…” within a [segment] shortcode to have that centered like this –

[segment]Hey there, thanks for ....[/segment]

The documentation has complete information on when, why and how to use [segment] shortcode. Hope this nails it finally.

[cliftoncreate]

Nailed. Thanks for all your help on this 🙂

[Author]

Posts