MENU COLOR IN RESPONSIVE THEME
-
Hi Guys,
Is there anyway to alter the primary menu color in the Responsive Theme? Maybe play around with css a little?
[moved to CSS Customization]
The blog I need help with is: (visible only to logged in users)
-
The menu background is done with a CSS linear gradient. Currently, to cover all browsers, there are a ton of declarations you need so that things will show properly on the majority of browsers. The first declaration is a fallback for browsers that do not support gradients and sets a static color. The last declaration (filter) is for older IE browsers, but I don’t think older than version 8.
.menu{ background-color:#585858; background-image:-webkit-gradient(linear,left top,left bottom,from(#585858),to(#3d3d3d)); background-image:-webkit-linear-gradient(top,#585858,#3d3d3d); background-image:-moz-linear-gradient(top,#585858,#3d3d3d); background-image:-ms-linear-gradient(top,#585858,#3d3d3d); background-image:-o-linear-gradient(top,#585858,#3d3d3d); background-image:linear-gradient(top,#585858,#3d3d3d); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858,endColorstr=#3d3d3d); } -
I’m a complete noob at CSS…Should I paste this code on the CSS field in customize and then play around? Which values should I change?
Many, many thanks! : )
-
-
When I set the menu as secondary, it always pulls both as secondary and primary. Do you know how to override that so that my only menu remains the secondary menu? It looks nicer and less bulky : )
-
-
To change the menu text color, here are the two rules. The first is the normal color and the second is the color when you hover the mouse.
.menu a { color: #fff; } .menu a:hover { color: #fff; }If you are going to use just one color on the menu background, you don’t really need all the linear gradients, so you can delete those from the CSS rule and just leave the single top background-color declaration and set a single background-image: none to cancel the original linear gradients like this.
.menu{ background-color:#585858; background-image: none; }Of course if you plan on playing with the linear gradients, then keep those.
-
That’s perfect! We’re almost there!
My new problem is: There are black lines delimiting the options in the menu. I’m trying to go for the secondary menu look using the primary menu (when I select the menu as secondary, I end up with double menus, even though I set only one under secondary.)So I’ve tried making the menu color the same as the background, but the black lines really stand out…do you know how to remove them?
Also, can I change the menu’s font?
-
Hmmm, if you wish only the secondary menu to show, click Secondary Menu in the Menu Settings section and make sure Primary is not selected and save. When that is done, only the Secondary menu should show.
To get rid of the border lines on the primary menu items, add this.
.menu a { border: none; } -
That’s exactly what I did and it still came up with both menus.
I made sure to select only secondary as my menu, and all others I left blank : ( Maybe the template has a fixed primary menu, much like it has fixed widgets?I will try the border CSS! Do you know if I could make the menu show up above my header?
-
-
I tried using:
`.wf-active .sf-menu a, .wf-active .sf-menu a:visited {
font-size: 16.9px;
}but it didn’t work : (
-
Responsive has a pretty complex menu system, and we can certainly hide the primary menu with CSS, but once the touch device menu activates, the primary menu items show up in the dropdown. I looked and there isn’t any unique class we could use to hide the primary menu items once the touch menu activates.
Hmmm, that worked for me on the font size. Looking things over again, let’s try this then. I tried this in your customizer and it worked.
.menu a { font-size: 10.9px; }Changing fonts can be done by adding a font-family declaration to the above. The one thing to keep in mind is that if you set a font other than one of the two fonts you have chosen at Customize > Fonts, then that font has to be installed on the visitor’s computer or it will not show. This is a pretty solid listing of the fonts common to Windows and Mac.
Currently the menu is set to the same font as the body (base) text, which is this font stack.
"Arimo",sans-serifIf you let me know which font you are wanting to use I can help with the code.
-
What font would you recommend? : ) Perhaps the font that is used in the secondary menu, I believe it’s Arial maybe, or Helvetica? Since I’m trying to mimic that.
I tried the font size and it worked now, thank you so much!
How can I strike the bold out of the menu color though?
Also, even though I tried changing the menu hover color, it still reverts back to the standard grey and white. Any idea on how to override that?
-
So many questions, I think I should wrap them up in lists!
1. Font to be used on the primary menu: Same font as the secondary menu?
2. How to take bold out of the menu.
3. Changing menu hover color (the template seems to override the code I pasted)?
4. New one: Can I adjust the menu’s width and height?
5. New one: Can I put the primary menu on top of my header using CSS? -
-
The font on the secondary menu is indeed Arial. Replace your .menu a rule with this, which takes care of the font family/bold things (1 and 2).
.menu a { border: medium none; color: #2c3539; font-family: Arial,Helvetica,sans-serif; font-size: 11.9px; font-weight: 800; text-shadow: none; }On 3, the following is the entire CSS rule for the menu hover, complete with all the linear gradients and the font color.
.menu a:hover{ background-color:gray; background-image:-webkit-gradient(linear,left top,left bottom,from(gray),to(#363636)); background-image:-webkit-linear-gradient(top,gray,#363636); background-image:-moz-linear-gradient(top,gray,#363636); background-image:-ms-linear-gradient(top,gray,#363636); background-image:-o-linear-gradient(top,gray,#363636); background-image:linear-gradient(top,gray,#363636); color:#fff; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#808080,endColorstr=#363636); }On the nav width, it doesn’t currently have a width set, so it expands to the full width of the #container div. We can move the navigation up above the image using the following, which will let the design revert back to the original at 650px and narrower when the touch menu activates. This also moves your social icons above the header image.
@media screen and (min-width: 651px) { #header { position: relative; } .site-navigation { position: absolute; width: 100%; } #logo { padding-top: 40px; } #featured { margin-top: 20px; } #footer-wrapper .fit.col-380 { top: 40px; } ]See what you think with the above and we can go from there.
-
Perfect! You are a life saver, sacredpath!
I gave it a go with the menu position above the header, but I preferred under it.
Final question: Is there a way to diminish the height of the menu? It’s very thick right now. I’d like to make it a bit more lean, if possible! -
Oh, also, when I select BLOG and click on it, for example, the selection remains dark gray and the letters also gray. Do you know how to change that?
-
The height is controlled by a line-height and a height for .menu a. Edit the two 45px values as desired, and keep the two of them the same so that the text stays centered vertically in the menu div.
.menu a { height: 45px; line-height: 45px; }The dark block you see on on the corresponding menu item when you are on a page is the current page styling. It is an aid to visitors to help them know which page they are on. You can add the following and adjust the colors as desired.
.menu .current_page_item a, .menu .current-menu-item a { background-color: #343434; color: #fff; }
- The topic ‘MENU COLOR IN RESPONSIVE THEME’ is closed to new replies.
WordPress.com Forums 