Help me figure out how to center the menu! « Support Forum | Kriesi.at

Support Forum » Velvet

Help me figure out how to center the menu!

6 posts from 3 voices

Started 8 months ago by minxgraphics
Latest reply from Dude
This topic is not resolved

Tags:

Coding
menu

minxgraphics
Member

Hi everybody! I have just finished the layout on a new Velvet themed website and I can not for the life of me figure out how to make the menu titles centered so that the space between each menu title is even. Does anybody know how I can make this happen? Any help much appreciated ASAP :)

Posted 8 months ago #
Devin
Moderator
Hey minxgraphics,

Can we take a look at your site live? You can try adding the following css to your style.css (all the way at the bottom) but I'm not sure its what you are trying to do for sure:
```
#header, #header a {
text-align: center;
}
```
Regards,

Devin
Posted 8 months ago #
minxgraphics
Member

Hi Devin! Thank you very much for your help. I had already tried your suggestion, every which way I could think of! I tried it all the way at the bottom of my style.css file as you suggested as well and still no luck :( I can not make the site live for you to look at until my client has approved it unfortunately. Below is the code for the menu - As you can see below I have tried putting the text-align: code in various places of the head and menu sections with no luck:

/************************************************************************
-) HEAD
*************************************************************************/
#header{ /*head area, which contains main menu and logo*/
z-index: 100;
}

#header .container{
/*height:90px;*/ /*uncomment this is you want a specific height for the header. otherwise it will adjust to the logo size*/
overflow: hidden;
padding: 40px 0;
z-index: 100;
}

#header .fancyborder{
width:100%;
height:5px;
position: absolute;
top:0;
left:0;
}

#top .logo, .logo a{
display:block;
position:relative;
border: none;
padding: 0;
margin:0;
float:left;
}

#top .logo a, #top .logo a:hover{
top:0;
left:0;
outline:none;
border: none;
}

#top .logo img{
border:none;
}

#top .bg-logo, #top .bg-logo a{
text-indent: -9999px;
height:100px;
width:190px;
}

/*menu*/

.main_menu .menu{
float: right;
position: relative;
top:93px;
}

.main_menu .menu > li{
float:left;
width:120px;
line-height: 1.6em;
text-align:center;
}

.main_menu .menu > li:first-child{
text-align:center;
}

.main_menu .menu a{
text-decoration: none;
text-transform: uppercase;
display: block;
text-align: center;
}

.main_menu .menu a:hover{
text-decoration: none;
}

.main_menu .menu > li > a{
font-weight: bold;
font-size:11px;
letter-spacing: 1.5px;
padding-bottom:0px;
text-align:center;
}

.main_menu .menu li li a{
font-size:11px;
text-transform: none
}

.main_menu .menu li li ul{
display:none;
overflow: hidden;
}

.main_menu .menu li li{
display:block;
width:120px;
overflow: hidden
}

.main_menu .menu li li li{
width:120px;
}

.main_menu .menu li li li li{
width:120px;
}

.main_menu .menu li li li li li{
width:120px;
}

.main_menu .menu li li ul.showblock{
display:block;
}

.main_menu .menu li li:hover > ul{
display:block;
}

Very frustrating indeed! I was hoping to get this sorted out by the end of this coming weekend, will just have to keep chipping away at it and see if I can solve the puzzle :)

Posted 8 months ago #
Devin
Moderator
Hi minxgraphics,

Unfortunately just seeing the css doesn't help. The actual html for the menu/location and what elements are all taking effect on it are unnecessary to try and target it specifically.

The only other thing I can suggest is adding !important to the above css as it works for me in-browser testing. So:
```
#header, #header a {
text-align: center !important;
}
```
Regards,

Devin
Posted 8 months ago #
minxgraphics
Member

Thank you Devin. The website will be going live tomorrow so I would love you to have a look tomorrow evening at around 7pm (AEDST) and you will be able to see what I mean. I just want the spaces between each menu item to be even and I thought that centering the text would do that but it obviously does not as each menu title is in a column I think anyway so they will never be able to have even space between them :( The website to look at is:

http://www.dragonflycustombooks.com.au

Posted 8 months ago #
Dude
Dude
Imho you just need to set the width of the menu items to auto and then add a margin to them - eg like:
```
.main_menu .menu > li {
    margin-left: 40px;
    width: auto;
}
```
The space will be 40px between the items.
Posted 8 months ago #