I am in the process of styling the top navbar but can not see how to remove the top caret on the dropdown panel (please see image below). Please let me know if you can help. Thanks
You can remove it by overriding the Bootstrap CSS like this..
/* remove the triangle */
.navbar .nav>li>.dropdown-menu:before,.navbar .nav>li>.dropdown-menu:after {
content: none;
}
Working example: http://bootply.com/66576
Related
I created a horizontal menu using
display : inline
so I expected that Wordpress themes do the same. However, inspecting
http://demo.presscustomizr.com/
with Firefox Developer I have not found such a css rule. How is it achieved here?
They use float: left to position the li elements horizontally.
Inspect a list element and you will see this:
.navbar .nav>li {
float: left;
}
Could you please advise on how to create a navigation menu like this one at the bottom?
https://m1.behance.net/rendition/modules/30754283/disp/e05f3faf8755b4c1892a7e9c66de7627.png
I already have the footer div set, I only need the menu itself. I tried and experimeneted but couldn't get it to display exactly as I want. The images would have to be with CSS background so that I can have the image change when the "tab" is active.
Thank you very much in advance!
I don't really see that it is in any way necessary to do this with background-image attribute.
You could just use a normal <img src="pics/my-img.png" /> in the HTML structure of this navigation bar. Setting the alignment to simply nothing on the image will in most cases drop the text on the same container below the picture, but in case of an exception:
#myNavigation img {
display: block;
padding-bottom: 4px;
}
This should help you with what I understood of your question, that you're trying to create a navigation menu with images and text.
There's also a quite simple and nice hover effect possibilities for this, for e.g:
#myNavigation img {
opacity: 0.6;
}
#myNavigation img:hover {
opacity: 1;
}
Good luck!
I'm starting a new project with Bootstrap 3, and I need that clicking on "Sandwich" icon in responsive view, will open collapsed navbar from left side off-canvas instead from the top like in default behaviour.
I'm surprised when I see that in official documentation there is only this Example, that anyway is putting off-canvas a sidebar and not main navigation bar...
Can you help me?
In your custom css:
.navbar-toggle {
float: left;
margin-left: 15px;
}
This will basically override the bootstrap css that forces the toggle to float right. Make sure the put your custom css link tag AFTER the bootstrap css link tag.
I'm using Twitter Bootstrap and its responsive design for the typical Twitter Bootstrap navbar menu at the top.
In there i have a few links and a dropdown menu. When i resize my browser to 768px or less, it hen transforms into a new sort of nav menu.
This all works fine out of the box, but what i'd like to have is that the dropdown menu is also expanded.
What happends now is that the dropdown menu is still collapsed. When i open it, it then creates a scrollbar inside that menu container which i really don't like.
Here's a screenshot of what i mean:
Example: http://getbootstrap.com/examples/jumbotron/
How can i remove the open/close Dropdown link, and have all of its items listed inside that menu so that it doesn't create an ugly scrollbar on the side of the menu?
You could split your problem in three parts:
1. the scrollbar
By default the dropdown menu get a fixed (max) height of 340px (and a overflow-y:auto, see also: Twitter bootstrap 3 navbar navbar-right outside navbar-collapse).
You can undo this max-height by remove it (line 52 max-height: 340px;) from navbar.less and recompile Bootstrap. Or add some css after Bootstrap's css in your document:
#media(max-width:767px)
{
.navbar-collapse {
max-height: none;
}
}
Note when the height of the menu becomes the height of your screen, you can't scroll your content due to the fixed position of your navbar.
2. open the dropmenu on collapse
On the first sight you should add an open class to the dropmenu on collapse, but the clearmenus function of dropdown.js will remove this class. Adding a display:block will show the dropdown menu, but its state /display will be like non collapsed.
A solution will be to add a class with the same styles as the open class which won't be remove by the clearmenus.
$(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
$('.navbar-collapse .dropdown-toggle').parent().addClass('opened');
});
To give the opened class the same styles as the open class you will need to change your .less files and recompile Bootstrap after it.
in navbar.less (line: 215)
// Dropdowns get custom display when collapsed
.open .dropdown-menu, .opened .dropdown-menu {
in dropdown.less (line: 119)
// Open state for the dropdown
.opened, .open {
resize
With the above the dropdown menu stays visible after undo the collapse (by resizing the screen) to prevent this add some css after Bootstrap's CSS (you could also add this to your Less files):
#media(min-width:768px)
{
.nav > li.opened .dropdown-menu {display: none;}
.nav > li.open .dropdown-menu {display: block;}
}
styling of the links in the dropdown
Your navbar use navbar-inverse to style it (see also: https://stackoverflow.com/questions/18936357/using-multiple-navbars-with-twitters-bootstrap-3/18936358#18936358)
Navbar-inverse will be defined in navbar.less too. To set the link colors for the opend class too, use:
#media (max-width: #screen-xs-max) {
// Dropdowns get custom display
.open .dropdown-menu, .opened .dropdown-menu {
3. remove the dropdown link
css after Bootstrap's CSS:
#media(max-width:767px)
{
.nav > li > a.dropdown-toggle{display:none;}
}
Demo: http://jsfiddle.net/pgK4y/
See also: https://github.com/twbs/bootstrap/issues/10758
for the dropdown opened by default on mobile / small resolutions,
here is another approach using jquery that doesn't involve messing with less code or css.
tp://stackoverflow.com/a/23202921/1174172
I usually dont have problems with css, and I'm made this nav menu myself but I just can't seem to understand why it will not show my div when I hover over an item ... I create a jsfiddle # http://jsfiddle.net/LuLTM/ with all the code as well ...
#beautyworld #beautyhealth {display:none;}
#beautyworld #beautyhealth:hover {color:black;display:block!important}
I want when hover over div #beautyworld for the div #beautyhealth to appear ... I just dont understand why my css is not working .... Could someone please advise ? Thank You
I think the problem is that you are trying to have fire a hover over something that is currently 'display:none'. Since display none collapses the element, there is nothing to hover. You heed to have it hover at a relative parent level to cause the display of the child.
For example:
#beautyworld > div { display:none; }
#beautyworld:hover > div { color:black; display: block !important; }