-
Posts
-
I’ve been pulling my hair out for hours trying to customize colors that don’t exist in the CSS style sheet (colors made up by the theme).
What I need to accomplish is:
– Change navigation menu (only below logo) background color
– Change navigation menu font size
– Change navigation menu padding
Can you provide some insight on overriding these phantom colors?
The Quick CSS box seems like it could be a useful feature, but it’s almost impossible to figure out without digging into your source code and reverse engineering the theme.
Assistance would be appreciated!
Hi,
You can use this codes on your custom.css or Quick CSS:
– Change navigation menu (only below logo) background color
.header_color .main_menu ul {
background: red;
}– Change navigation menu font size
.bottom_nav_header.social_header .main_menu ul:first-child>li a {
font-size: 15px;
}Change navigation menu padding
.main_menu ul:first-child > li > a {
padding: 0 20px;
}Change the values.
Regards,
Ismael
Ismael,
Thank you for the fast reply! Still needing some help here.
I am using “header with social icons and bottom” with “stretched layout” styling.
There are three sections of the header. Here’s what I’m trying to accomplish:
– Set background color of the top navigation bar (background color needs to be full width, the previous code you gave only sets the link background color)
– Set font color for both links and small info text on top navigation bar
– No background color behind the logo
– Set background color for the main navigation bar and drop down menus
– Set font color for main navigation bar (right now it derives two custom dynamic colors, one for the drop down menus, and one for the top level links) I need to change both.
The CSS code on the base level is a nightmare is sort out with this theme. I thought I was good with CSS until I tried making sense of the overly complex code behind this theme.
Appreciate your help.
1) Use following css code to change the bg color of the top navigation bar
.header_color .container_wrap_meta{
background: #f8f8f8;
}2) For the link color use
.header_color .sub_menu>ul>li>a{
color: #f8f8f8;
}3) That’s not possible. If the logo is transparent you’ll always see the bg color of the container behind the logo (eg by default white like here: http://kriesi.at/themes/enfold/homepage/home-v6-classic-4-column/ )
4) You can change the link bg color & the dropdown bg color with
.bottom_nav_header.social_header .main_menu ul:first-child > li a, #header_main_alternate, .bottom_nav_header.social_header .main_menu ul:first-child {
background: #f8f8f8;
}5) Change the color with
.header_color .main_menu ul:first-child > li a:hover, .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a, .header_color .main_menu ul:first-child > li.active-parent-item > a{
color: #f8f8f8;
}for the selected/active item and
.bottom_nav_header.social_header .main_menu ul:first-child > li a{
color: #f8f8f8;
}for all other menu items.
- The topic ‘Setting Navigation Text Color, Setting Font Size’ is closed to new replies.