I have a navigation bar set up using nav-pills. I have the bar horizontal and justified, so they all line up nicely, but I want to change the width of the nav-pills so that I can make them more even with the everything else on the website. Here is my code for the navigation bar:
<div class="container" id="buttonBar">
<ul class="nav nav-pills nav-justified">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>VIDEO</li>
<li>PHOTOGRAPHY</li>
<li>ARTIST PORTFOLIOS</li>
</ul>
</div>
On a custom CSS file I made, I tried doing the following:
.nav .nav-pills .nav-justified li a {
width: 50px;
}
But to no avail. What would be the right way for me to do this? And could anyone also tell me how to change the color of both the text and the color of the nav-pill? I want to make the background color transparent.
Your CSS selector is incorrect. The space between the first three classes means that they are children, and not that the element has all three classes.
Try this instead :
.nav.nav-pill.nav-justified li a {
width: 50px;
}
If you can't get it to work, a fiddle or something would be useful.
Related
I am trying to have an anchor inside a list item to be changing colors when the mouse is hovering over. It is not working properly for PORTFOLIO and CONTACT (when I hover over ABOUT, CONTACT changes color) but it not working at all for HOME and ABOUT (HOME and ABOUT do not change color at all). Why might that be?
Here is my CSS code:
li a:hover{color: #E3872D;}
And here my HTML code:
<div class="leftpart_wrap">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="leftpart_bottom">
<ul id="icons">
<!--Icons go here and their hovering attribute works perfectly-->
</ul>
</div>
</div>
It could be a few things. Your code is correct but probably has some overwriting style in your CSS. Try using more specific CSS to see if it resolves:
.navbar li a:hover{color: #E3872D;}
I think Bootstrap is very hard to understand and override using CSS overriding rule (I don't really want to create my own custom Bootstrap CSS because really it's not very flexible, just one small change will require us to rebuild a new version of Bootstrap from the LESS source code).
What I want here is just simple that when hovering on a link (in a navbar), change its background to my own color, not the ugly default color Bootstrap sets. So even when I define an Id for my link element, CSS rule still does not work at all.
li#li#li#li#li#li#li#li:hover {
background-color:red!important;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar" id="menu">
<ul class="nav navbar-nav">
<li id="li">Test</li>
</ul>
</div>
As you can see even with that CSS rule, it cannot be overridden? Or I'm wrong with the actual element whose background is changed on hovering (while I think it should be actually the li element)?
Also I'm wondering if someone could explain to me by how Bootstrap could make that magic happen. I would like to apply that same magic in my own CSS plugin, it may be helpful in some case.
it's the a link element that's getting that background
#li:hover a {
background-color:red;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar" id="menu">
<ul class="nav navbar-nav">
<li id="li">Test</li>
</ul>
</div>
I'm trying to make my current CSS navigation responsive for mobile devices.
I currently have it set up with a media query so that when the screen width falls below the specified size it changes to block form (stacked) and a menu icon appears on the right hand side of the logo (to later be made into a button).
The problem I'm currently having is that the drop down menu which is used for my second link in the navigation, is causing a gap to appear between the second and third link (as if the drop down content is taking up the space whilst hidden).
I've tried looking for solutions but can't seem to find the right answer for my particular setup. Basically, the link "How It Works" should sit right beneath "Sections" when on mobile.
http://jsfiddle.net/fc45c7p5/
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:330px;height:100px"/>
</a>
<div id="menu-icon"></div>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME</li>
<li>SECTIONS
<ul>
<li>RETAIL</li>
<li>HOTEL</li>
<li>RESTAURANT</li>
<li>SHOPPING</li>
</ul>
<li>HOW IT WORKS</li>
<li>OUR EXPERIENCE</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>CONTACT US</li>
</ul>
</div>
Don't take too much note of the media query max-width of 1008px, I'm aware this isn't standard mobile size, it's just temporary whilst I get it working first.
Any help regarding this is really appreciated.
visibility keeps your elements there without displaying them. You should use display:none when you do not want show the space the hidden element takes. Use display:block to show them again. Add some CSS transitions to the height of the a elements to make the reveal somewhat smoother.
Here : http://jsfiddle.net/6eshy7n2/
Add the following.
ul.navbar ul li { float: none; width: 100%; display:none;}
ul.navbar li:hover > ul li{display: block;}
You have to make the lis inside the uls actually not display when the parent li is not being hovered. When it is hovered you then change the display value to block to make it visible.
I have being trying to find a solution with a menu i have on a custom html website that it is not appearing but i can't for some reason find a solution and i'm quite curious what i'm doing wrong.
<div class="header_area fix" id="header">
<div class="header_top fix">
<div class="left_logo floatleft fix">
<img src="img/logo.png" alt="Burning Desire Stoves Fireplace and Fire Centre" />
</div>
<div class="main_menu floatright fix">
<button style="floatright" id="mobile_button">Menu</button>
<ul>
<li>Home</li>
<li>Showroom</li>
<li class="dropdown">Stoves
<ul>
<li>Woodburning Stoves</li>
<li>Multifuel Stoves</li>
</ul>
</li>
<li>Fireplaces</li>
<li>Fires
<ul>
<li>Gas Fires</li>
<li>Electric Fires</li>
</ul>
</li>
<li>Case Studies</li>
<li>Contact</li>
</ul>
</div>
</div>
You can check the website here
The site is a for a client of mine he said he added some extra menu option without touching the css and then the menu broke. More importanly the dropdown of the menu is not appearing and i was trying to make come the surface with some display:block or z-index with no luck.
Also he has add a PHP CMS called Couch which is adding tag.
To give you a better idea the following code as actually a snippet and it is located in a most likely cms path "editor/snippets/header"
.main-menu>ul>li>ul {
position:absolute;
}
Your Menu Has a Dropwown but it is not hidden , so it takes some space. and the header has oveflow hidden, so the menu is becoming hidden entirely.
Add this css and your menu will be shown,
but you need to add code for dropdown to work.
This CSS is all kinds of jacked up.
The issues:
overflow: hidden on the .fixed element is causing the text to disappear.
As far as I can tell, there's no CSS that displays the drop down lists on hover
The drop down lists aren't hidden, so they're taking up space forcing the main list out of the nav bar
There's still list-style-type:disc for the li elements
I'll fiddle with it for a minute, but those are the issues.
Update I fiddled with the CSS and got the dropdowns to display. You'll have to make them look pretty with some CSS, but they're working. Yeah, it's kind of hacky, but I did what I could with the 5? CSS sheets all competing for screen time.
/* menu extra css */
.dropdown:hover .dropdown-hidden {
display:block;
}
.dropdown-hidden {
float: none!important;
display: none;
position: absolute;
z-index: 99999999;
left: 0px;
background: #fff;
}
.dropdown-hidden li {
display: block;
float: none!important;
position: relative;
}
.fix {
overflow: inherit!important;
}
li {
list-style-type: none;
}
-
<ul>
<li>Home</li>
<li>Showroom</li>
<li class="dropdown">
Stoves
<ul class="dropdown-hidden">
<li>Woodburning Stoves</li>
<li>Multifuel Stoves</li>
</ul>
</li>
<li>Fireplaces</li>
<li>Fires
<ul class="dropdown-hidden">
<li>Gas Fires</li>
<li>Electric Fires</li>
</ul>
</li>
<li>Case Studies</li>
<li>Contact</li>
</ul>
I'm new to Bootstrap/PHP, so please be gentle :-)
The code is as follows:
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<p class = "navbar-text pull-left">Copyright 2014 by ABC</p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Support<b class = "caret"></b>
<ul class = "nav navbar-nav navbar-right dropdown-menu">
<li>Help</li>
<li>FAQ</li>
<li>How To</li>
</ul>
</li>
</ul>
</div>
</div>
This creates a navbar on the bottom of the page with a drop-up menu.
The navbar has an inverse colour, so the text has been set to white to maximise the contrast.
Unfortunately the result is white text on a white background when attempting to select from the menu.
My guess is that I need to override Bootstrap's CSS, but I'm not sure what to override.
And I would prefer not to screw with Bootstrap's CSS file just in case I blow everything.
Many thanks
You have overridden link color by adding an inline style style="color: #ffffff;". This is a bad practice as it’ll take precedence on all other declarations to this element (:hover, :active, …).
If you want to change Bootstrap defaults, you should better do it in a separated CSS file. In this case the style would be:
.navbar-inverse .navbar-nav>li>a {
color: white;
}
You have extra classes on your dropdown
<ul class="nav navbar-nav navbar-right dropdown-menu">
It should be
<ul class="dropdown-menu">
You can see the result here.
The above ans, by LeBen is pretty much fine. But, while working on Bootstrap, keep an eye while overriding Bootstrap CSS. You can easily play it first in Firebug then override, and place a common comment with its description so you can easily make it out. And, while overriding make sure it wont affect the other part in the project, so think before overriding it