News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Can you help me center my menu please?

Started by Rob Lightbody, October 11, 2016, 03:07:26 PM

Previous topic - Next topic

Rob Lightbody

On my forum - http://www.theqe2story.com/forum/ - I'd like the main menu to be centred.  I'm not very good with CSS, and someone on here developed the theme for me (Ricky - (http://ifandbut.com) - is he still around??) , so I'm a bit stuck!

I've attached the 2 relevant files, in case anyone can help me.

Many, many thanks,

- Rob

Sir Osis of Liver

index.css -



/* Styles for the standard dropdown menus.
------------------------------------------------------- */
#main_menu {
background: url("../images/theme/menu_bg.png") repeat;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
// float:left ;
box-shadow: 0 0 1px #FFFFFF inset;
-webkit-box-shadow: 0 0 1px #FFFFFF inset;
-moz-box-shadow: 0 0 1px #FFFFFF inset;
border: 1px solid #000;
// margin: 0 0 16px;
margin: auto;
width: 980px;
}


Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Rob Lightbody

Quote from: Sir Osis of Liver on October 11, 2016, 05:09:40 PM
index.css -


Thanks very much!

That's worked, but removing the float, has removed the pale blue background from the menu bar?

Sir Osis of Liver

Don't have the complete theme, so I don't see the bar or button backgrounds.  You could also do this, which centers the bar and adjusts width to content, but don't know how it affects bg.

index.css



/* Styles for the standard dropdown menus.
------------------------------------------------------- */
#main_menu {
background: url("../images/theme/menu_bg.png") repeat;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 0 0 1px #FFFFFF inset;
-webkit-box-shadow: 0 0 1px #FFFFFF inset;
-moz-box-shadow: 0 0 1px #FFFFFF inset;
border: 1px solid #000;
display: inline-block;
}



index.template.php



// Show the menu here, according to the menu sub template.

echo '
<div style="text-align: center;">',
template_menu(),'
</div>';



Can you attach the theme zip?

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antes

You can give this a try.

Open index.css and find ".dropmenu li", change its float: left to display: inline-block, then go for #main_menu add text-align: center; then find dropmenu li li and add text-align: left to it.

Rob Lightbody

Quote from: Antes on October 11, 2016, 06:24:42 PM
You can give this a try.

Open index.css and find ".dropmenu li", change its float: left to display: inline-block, then go for #main_menu add text-align: center; then find dropmenu li li and add text-align: left to it.

That worked.  Thanks so much !

The only thing now... how do I add a wee gap under that menu block ... (see attached).


Matthew K.

It's actually way more accurate and easy to center the menu using Flexbox.

Antes

You should add bottom margin to #main_menu

Rob Lightbody

Thanks all for your help,

Thats it sorted good enough now.

Advertisement: