Posted 10 months ago #
Good morning,
I'm currently running the Pitch theme. I would like to center the text in the main navigation menu, but since the width of the bar isn't set I'm having a heck of a time figuring it out. Even when I set the width, I still can't seem to get the hang of it.
My website is at http://lisbonemergency.com .
I'd appreciate any suggestions!
Kira
Don't know will you like it, as it's not the cleanest solution, but if you will not change top navigation links, you can do something like this:
in style.css, around line 296 (for ul#mainmenu-menu li.menu-item a)change padding to 'padding:20px 28px;'
than add the following
#menu-item-205 a {
padding: 20px 23px !important;
}
#menu-item-205 {
border-right: 0 !important;
}It's not really clean solution, so if someone has better one, use that instead of this.
Posted 10 months ago #
Unfortunately, that solution doesn't work. I need a flexible solution.
Although the width of the body is fixed at 960px, for some reason the menu bar appears differently on different computers. On some, the last item wraps around to the next line. On others, there's a huge amount of space at the right end of the bar.
I've adjusted the padding so it just fits on the screen that (for some reason) has the biggest problem with wrapping, but I'm still stuck with the space everywhere else.
Posted 8 months ago #
Hey guys, I have the same problem as DanceMediaArtist. Can anybody help me to adjust(center) text and buttons in the main menu navigation bar. Last solution unfortunatelly doesn't work. Thank's in advance for any help :)
Posted 8 months ago #
aszufnara,
Can you create your own thread, with a link to your website as well?
Posted 8 months ago #
sure I can but I have exactly the same problem as DanceMediaArtist so I didn't want to make a mess :)
Posted 8 months ago #
I found the solution to this. I will post it and then close the topic. Give me a little bit find the code that finally worked.
Posted 8 months ago #
This is the entire CSS that I used to center the lower menu bar on the Pitch theme. Originally it didn't support child themes, so I made changes to the actual code. I'm working on updating with a child theme, which would actually be your best option. Good luck.
/* =Main Menu
-------------------------------------------------------------- */
#mainmenu {
margin: 10px 0;
margin-bottom: 0;
word-wrap: break-word;
}
ul#mainmenu-menu {
height: 42px;
background: rgb(247,247,247);
background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(244,244,244,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(244,244,244,1)));
background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
border: 1px solid #E2E2E2;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f4f4f4',GradientType=0 );
text-align: center;
}
ul#mainmenu-menu li.menu-item {
position: relative;
display: inline-block;
font-size: 12px;
font-weight: bold;
}
ul#mainmenu-menu li.menu-item a {
color: #5e5e5e;
display: block;
padding: 15px 20px;
text-decoration: none;
}
ul#mainmenu-menu li.menu-item a:hover {
background: #C9C9C9;
}
ul#mainmenu-menu ul.sub-menu {
position: absolute;
top: 42px;
left: 0px;
width: 160px;
background: white;
border: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.25);
display: none;
z-index: 99;
}
ul#mainmenu-menu li:hover ul.sub-menu {
display: block;
}
ul#mainmenu-menu ul.sub-menu li {
border: none;
font-weight: normal;
}
ul#mainmenu-menu ul.sub-menu li a {
line-height: 15px;
padding: 15px 15px 15px 15px;
}
Posted 5 months ago #
Can anyone tell me how to change the COLOR of the main menu? We'd like it a dark grey. Thanx!
You must log in to post.
