Hello I need to add space between the li items on my toggle open menu, I can't find the class, I've try to give them padding to the next classes; .navbar-nav .open .dropdown-menu, .navbar-nav .open .dropdown-menu > li > a, and other more. It doesn't do anything.
Here is the image:
Checking the link you provided, you could easily access the li elements by targeting the ID provided by bootstrap and selecting the child elements like this:
#menu_my_bootstrap_menu_settings_menugoc2_container ul li {
padding: 10px 0; /* Or any other values */
}
Related
I want to change the color of the parent and the sub parent category into two different colours. Currently using the following code for my widget side tab.
.widget ul {background: gray;padding-top: 1px;}
.widget ul li {background:lightgray;margin: 1px;}
.widget ul a{background-color:darkgray;padding:1px;}
looking to change the font colour. I have tried many options but still not getting it right.
Try this:
.widget ul li.parent > a {
color: red !important;
}
It's hard to say without seeing your HTML structure, but are each of the sub-parent links ('Access Control', 'Electronic locks', etc) their own ul tags?
If so, could you not target each of their first li's like this:
.widget ul > li:first-of-type > a {
color: red;
/* INSERT STYLES */
}
This would target all uls' first li > a elements, as in the image on the right.
I'm trying a pure css approach to keeping the 'parent-most' navbar item highlighted when a child is clicked upon and a user navigates to that page. I have a primary navbar div with an unordered list, and each list has a list like so, so in this case a user navigates to the second most li here:
.primary-navbar ul li ul li{
background-color: red !important;
}
how do I make it so when the second li is active, the first li has background color of blue?
I tried:
.primary-navbar ul li:active {
background-color: blue !important
}
but that did not work and I'm not sure why. I'm trying to avoid jquery...
:active is the state of the element when active (i.e. a link is active when it is clicked). When you load the new page, no elements are active. You'll need to add a class to the li on the new page (something like 'active' or 'current-page' for example) to get the effect you're looking for. It's not possible with CSS only.
When you implement that, you should also take a second look at your CSS:
.primary-navbar ul li.active {
background-color: blue !important
}
That will not only make the first (parent) li.active blue, it will also target any li.active nested beneath it. i.e. it will also make .primary-navbar ul li.active ul li.active blue.
Try something like:
.primary-navbar > ul > li.active {
background-color: blue;
}
The >s will only target the li.active that is directly under the ul that is directly under .primary-navbar
I'm trying to make a list that has a different first letter for some of the items in the main menu. I have the first-letter psuedo element working across the list, but don't want it to show on the first and last child in the list.
.main-navigation li a:first-letter {
color: #e88a2a;
}
.main-navigation li ul li a:first-letter {
color: #6a6a6a;
}
I'm using the first part this code to colour the first letter in the menu items, and then the second part to stop the sub-menu items taking that colour.
However, trying to use
.main-navigation li a:first-child:first-letter {
color: #f0f0f0;
}
is giving every first letter in the menu items and sub-menu items that colour, rather than just the first one (Home in my fiddle)
I want Home and Contact Us not to show the orange colour, or else show a different colour (the default one), whichever is easiest. Can someone help?
http://jsfiddle.net/wM9eA/
You need to target the li element with first-child, the same goes for last-child.
.main-navigation li:first-child a:first-letter,
.main-navigation li:last-child a:first-letter{
color: #f0f0f0;
}
Working Fiddle
You want the first and last li elements.
.main-navigation li:first-child a:first-letter,
.main-navigation li:last-child a:first-letter {
color: inherit;
}
The problem here is that :first-child applies to the element that it's applied to directly, while :first-letter applies to that element's content. Saying a:first-child will pick the first a inside the li, and there are only one a in each li. We need to apply select that to the li.
Working Fiddle
.main-navigation li:first-child a:first-letter {
color: #e88a2a;
}
.main-navigation li ul li:first-child a:first-letter {
color: #6a6a6a;
}
I have a bunch of images named after my pages in wordpress. Example:
page name : heart-health
image name : heart-health.png
My main menu has 1 sub-menu level and for each page name in a sub-level I would like to display the image as a background image set to the left. I have tried so many different ways but had no luck.
I know you can add custom text to the menu in the admin but I wish for it all to be done automatically.
I have found the start and end for sub level menu items in "nav-menu-template.php" & "class-wp-walker.php"
At the moment I just have the same picture showing on all sub menu items when you rollover but that is just using CSS.
.menu ul ul :hover > a{color:#000000;background-color: #eeeeee; background-image:url(images/menu-images/fruit.png); background-repeat:no-repeat;}
Any help or advice would be much appreciated.
The best way to do it is via CSS.
For example
.menu ul ul .custom-class a { ... }
.menu ul ul .custom-class:hover a { ... }
You can set custom classes for each menu item in the WordPress menu management, just make sure the "CSS Classes" checkbox in "Screen Option" (top right of page) is checked.
Also, to make things easier, I would suggest making an image sprite of all the images you'll be using in the menu so that your CSS code is much simpler.
.menu ul ul a {
background:url('/url-to-sprite.png') no-repeat 0px 0px;
}
.menu ul ul :hover a {
background-position:-20px 0px;
}
.menu ul ul .custom-class a {
background-position:0px -20px;
}
.menu ul ul .custom-class:hover a {
background-position:-20px -20px;
}
I am using Superfish to show a horizontal menu on a website. Whenever I am on a page that is either the current menu item or sub-menu item, the sub-menu always show. When this happens, it overlaps other sub-menus when you hover the mouse over them. How do you hide the current sub-menu being shown?
edit:
OK I figured out how to do this with CSS. I added the following code to superfish-navbar.css
ul.sf-navbar ul {
display: none;
}
ul.sf-navbar li:hover ul {
display: block;
}
It hides the current sub-menu and shows all sub-menus when you hover over the parent item.
For CSS
In superfish-navbar.css you would remove the following rule at line 63.
ul.sf-navbar .current ul, ul.sf-navbar ul li:hover ul, ul.sf-navbar ul li.sfHover ul {
left: 0;
top: 2.5em;
}
When You End Up Using Javascript
In the documentation for the superfish plugin, on the Options tab, it shows the default options. It looks like pathLevels is set to 1, and the description of pathLevels
the number of levels of submenus that remain open or are restored
using pathClass
looks like the option you need. Try setting pathLevels to 0.
See this jsfiddle for comparison: http://jsfiddle.net/keithwyland/G87Lm/
http://users.tpg.com.au/j_birch/plugins/superfish/#options