I have a bootstrap navbar solution with an hover dropdown.
It's something like this: http://bootsnipp.com/snippets/E7KEy
My problem is, that I need clickable links in the navbar.
Every dropdown parent should be a link. At the moment, the "dropdown-toggle" class didn't allow this.
In the mobile view, I need an extra link to open the dropdown because the parent item should stay clickable.
Are there any ideas for a solution?
One of the options is to use jQuery to show submenus; In a similar way how bootstrap loads menus.
Following is the code to do so and it worked very well for me:
$('ul.nav li.dropdown, li.dropdown-submenu').hover(function () {
$('> .dropdown-menu', $(this)).stop(true, true).delay(1000).show();
$(this).addClass('open');
}, function () {
$('> .dropdown-menu', $(this)).stop(true, true).delay(1000).hide();
$(this).removeClass('open');
});
In css file on line number 55 change replace it with this code.
.navbar-default .navbar-nav .open .dropdown-menu > li > a:click,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
background-color: #ccc;
}
Related
I just changed my WP theme to Twenty Twenty. I have one primary menu on my website at the top, I just have 2 links in this menu atm. And if I am on one of the pages from the menu, it underlines that link. I'd like to remove that feature.
Website link: http://eclairblock.com
At first I tried adding this additional CSS:
> .primary-menu-wrapper .primary-menu .current-menu-item {text-decoration: none;}
But it changes nothing, If instead of text-decoration: none
I add for example display: none , then the current page link in the menu disappears.
I also tried to add !important but it doesn't work since the current page is still underlined in the menu.
Finally, I tried to change the style-rtf.css file by removing .primary-menu .current_page_ancestor from this part:
.primary-menu a:hover,
.primary-menu a:focus,
.primary-menu .current_page_ancestor {
text-decoration: underline;
}
What else can I try?
Thank you guys (and sorry for being a total css noob)
Your rule is being overridden by an existing rule that is more specific. Please try:
.primary-menu li.current-menu-item > a {
text-decoration: none;
}
Here's a guide about CSS specificity: https://www.w3schools.com/css/css_specificity.asp
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 */
}
I'm working on this Wordpress theme and I'm adding highlighted menus for the current pages using a darker color.
The thing is, I figured out how to highlight the current link, but when I navigate to the "Sample Page" (which is the one who have sub-menus), all the submenus listed get highlited as well. And I don't want that.
The URL -> http://experiencias.freeserver.me/
The CSS I added:
.nav .current-menu-item a{
color: #fff;
background-color:#bc3031;
}
I also tried this to see if it works, but it was not successful
.nav .sub-menu {
display:none;
}
try this
.nav .current-menu-item > a{
color: #fff;
background-color:#bc3031;
}
this will only highlight direct child not nested elements.
I have a menu like this
Home -- Work -- Pricing -- Contact Us -- About
It is using one page layout. I have enabled the Scrollspy on Bootsrap. When I go to a specific div, the active menu background should be dynamic. So when the focus is on About, the background should change to the color as in the image.
Current CSS code is:
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
background-color: #080808;
color: #FFFFFF;
}
Fiddle
Using some Javascript & jQuery, we can add listeners to each nav link that change the background of the nav accordingly:
$('nav > div.home').click(function () {
$('nav').css('background', 'blue');
});
$('nav > div.work').click(function () {
$('nav').css('background', 'red');
});
$('nav > div.pricing').click(function () {
$('nav').css('background', 'green');
});
As you see on default twitter bootstrap navbar menu only the active menu item's background is different then other.
What I want is when I'm on a menu item, I want the background to be changed to another color.
The bottom line, I should act as active one when I'm on hover of the menu item.
How can I do this?
Everyone here is wrong, after some testing you'll find this CSS to change menu hover.
.dropdown-menu li a:hover {background-color:red;}
Enjoy
You have to add an inline style or different id to the li on that particular page and style it to your liking. If you dont have access to that you have to do it using Jquery. Does that answer your question.
In your css:
.navbar .nav > a:hover {background-color:#f60;}
I hope this helps, I'm a little confused as to what you're asking.
Check answer by #martincho- it worked for me in changing the blue hover color:
Don't change bootstrap.css. Create another css file where you can override this. Anyway, the line is 4572:
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a
Set background-image to none, and background-color to whatever color you want.