Is there a way to change the font in my main navigation menu without changing the fonts on the drop downs under them? I'm using Wordpress with a Genesis child theme. This is my site. I just want to change the font on the gray navigation bar, not the links under them.
make CSS rules to this class
.genesis-nav-menu>li>a {
//some CSS
}
Just use the direct child selector example header > ul {font-family:Arial} this will select only the direct children of the header element but not anything deeper
In your style.css on line 948 you have this block of style:
.genesis-nav-menu .menu-item {
text-align: left;
}
Change it to have the font-family declaration in it e.g. if you have Verdana font to add for menu links:
.genesis-nav-menu .menu-item {
text-align: left;
font-family: Verdana;
}
It will change font for all menu links in Genesis theme, but will not effect any other links in the theme.
Related
I am trying to style my WP Menu Navbar. I want that the Pages that have children pages can be styled differently (mainly reducing the bottom margin, so that it is clear that the children pages belong to the parent page).
I know how to inspect a site and tried to target possibly every class that is listed there. But nothing is working. The site isn't live yet, but I will attach a screenshot of Google Inspect. It's the "menu-item-425" that I want to style differently.
I tried targeting like this:
.main-menu-links .menu-item .menu-item-has-children ul li a {
color: black;
font-size: 50px;
}
But nothing changes. Any advice?
Try to remove space between .menu-item and .menu-item-has-children like this
.main-menu-links .menu-item.menu-item-has-children ul li a {
color: black;
font-size: 50px;
}
I guess these are classes of the same element.
I got 2 current items on my web-site, the second is a section from home but i need to highlight only the first one, how can i do that? i added a class to the second menu item and tried to modify but it doesnt work. noob wordpress designer here. the site: https://www.crescentbun.testebossnet.ro/ any help would be apreciate.
Your class set is canceled because there is css from the theme overwriting it like:
.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a {
color: #f4ab02!important;
}
And as you tried to set the CSS on li and there is a CSS applied on your a under the li the CSS is canceled.
So set your CSS like:
.aboutus span{
color: black;
text-decoration: none;
}
I'm using the Protostar template on a Joomla 3.0 site and have a question about modifying styles in its template.css file, to have the collapsible vertical menu use the same class color styles/behaviors for the text of the links as what I have for the full-width horizontal menu. I'm not familiar with all the dozens of classes (e.g., all the .nav and .navbar classes) that are specified in the default template.css file. By using customized classes in the user.css file I have the background colors figured out, and have one of the link text colors to be the same, but I'm stuck on the remaining styles I need to change. I've been using Firebug but still haven't found a method to do this.
Here's an album of six screenshots showing three stages of both menus. Again, I need to have the vertical menu use the same text styles/behaviors as the horizontal menus.
I'd like to fix this by using the custom user.css file to modify only the required styles for the appropriate classes, as I don't want to make direct changes to the default template.css file if at all possible.
(A related question, although not as critical, is how to decrease the margins between the vertical menu items.)
So, any help will be greatly appreciated. This is the final item I need to complete for this site so I'm anxious to get this figured out. Thanks in advance!
Joomla 3.x Protostar use Bootstrap 2.3.2v and have different css styles for Desktop and Tablet/Mobile view.
You need to use bootstrap media query to style it. For example:
#media (max-width: 979px) {
/* menu item color */
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
color: #0000ff;
}
/* space between menu element */
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
padding: 3px 15px;
margin-bottom: 0;
}
}
you can find more about bootstrap media query media query at documentation
I have set up tabbed content (using Ultimatum framework and shortcode) with text, images, and embedded YouTube videos. All works well, but I would like to know how to eliminate the bullet list style that is next to the tabbed menu. I think the class that calls this style is:
nav nav-tabs ult_tablinks
There is an issue of the main bullet styles that are in my custom css file which is:
Code:
/* Bullets */
.archive-page ul li,.entry-content ul li{list-style:squareoutsidenone;color:#421C52;}
/* Bullets End */
I like the way this setting styles the bullets throughout the site. Although, it is a problem in some areas like the styling in shortcode such as the tabs above because it is placing the bullets inside the tabbed menu.
The nav nav-tabs ult tablinks is inheriting the code below:
Code:
.archive-page ul li, .entry-content ul li {
list-style: square outside none;}
li {line-height: 20px;}
Is there anyway that I can still use the general bullet styling and just eliminate them from this shortcode area?
Here is the link to beta site where you can see what I am talking about. I would like the tabs to not reference a list-style.
http://www.drphyllisbooks.com/drbooks2014/books-neural-therapy/patient/
I am able to remove the bullets by deleting the /* Bullets */ css above but then I don't have the nice bullet style throughout the site.
Any ideas on how I could fix this or better yet a solution would be greatly appreciated.
I thank you all for your time and consideration.
Add this to your custom CSS file:
.entry-content ul.nav-tabs li { list-style:none; }
Appending "ul" with the .nav-tabs class specifies only the li's in the tabbed menu.
When hovering on my second menus (can be found there: http://justxp.plutohost.net/survive/index.html)
the items are jumping.
It happened once I added a background with padding to them, well that's what it needs to have, but it should just appear, not jump?
My code:
HTML + CSS can be found here:
http://pastebin.com/cbLDRefB
thanks.
For not jumping you should not change the size of the elements on hover
you have
.nav6 a:hover {
padding: 21px;
}
so you need to add padding to the all links not only :hover
.nav6 a {
padding: 21px;
}