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>
Related
so I'm using this guide to create a portfolio slider (https://github.com/lmgonzalves/momentum-slider)
But I dont like the size of the buttons which I want to make higher. It just seems like anything I do in the CSS file doesnt change anything. The buttons work and the CSS itself works, I just cant change the size of the button...
This is the link of the portfolio-carousel.css (https://github.com/lmgonzalves/momentum-slider/blob/master/css/portfolio-carousel.css)
<link rel="stylesheet" href="css1/normalize.css">
<link rel="stylesheet" href="css1/portfolio-carousel.css">
then the buttons in HTML
<main class="sliders-container">
<ul data-animate="fadeInUp" class="pagination">
<li data-animate="fadeInUp" class="pagination__item"><a
class="pagination__button"></a></li>
<li data-animate="fadeInUp" class="pagination__item"><a
class="pagination__button"></a></li>
<li data-animate="fadeInUp" class="pagination__item"><a
class="pagination__button"></a></li>
<li data-animate="fadeInUp" class="pagination__item"><a
class="pagination__button"></a></li>
</ul>
</main>
Then i call the scripts
<script src="../js1/momentum-slider.js"></script>
<script src="../js1/portfolio-carousel.js"></script>
You can add increment padding property in your css. It will increate the size of the button
padding:10px;
if already have some padding add more px in padding if 10 then 15px so on...
How can I get my sticky navigation menu to change background color (i.e. blue to white) after sticking to the top of the screen specifically using the GetUIKit framework?
Here's my code:
<nav class="uk-navbar-container" uk-navbar data-uk-sticky>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li class="uk-parent"><a href="#works" uk-scroll>works</a></li>
<li class="uk-parent"><a href="#about" uk-scroll>about</a></li>
<li class="uk-parent">resume</li>
</ul>
</div>
</nav>
I read something about being active and inactive, but I don't know what I'm supposed to do. I would prefer to only use the GetUIKit framework in this situation, but if there are easy solutions that are compatible with GetUIKit's code, I'd be willing to try! Thank you!!
As written in docs, you need to provide a class for active state with cls-active: uk-navbar-sticky
For valid HTML5 code, I'm using data-uk instead of uk (which works fine as well)
.tall-placeholder {
height: 1000px;
}
.uk-navbar-sticky {
background-color: powderblue!important;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.min.css" />
<!-- UIkit JS & jQuery (not required by UIKit anymore) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit-icons.min.js"></script>
<nav class="uk-navbar-container" data-uk-navbar data-uk-sticky="cls-active: uk-navbar-sticky">
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li class="uk-parent"><a href="#works" uk-scroll>works</a></li>
<li class="uk-parent"><a href="#about" uk-scroll>about</a></li>
<li class="uk-parent">resume</li>
</ul>
</div>
</nav>
<section class="tall-placeholder"></section>
You are using prefect, You just don't need to revise code, It's already adding a "uk-active " class when you scroll. So place background color on .uk-active class.
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.
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
I'm wondering on how I can center the bootstrap 3's navbar menu items. I know they have included a .nav-justified class but that will just conflict with navbar-nav if used together. I belive it is being looked into by the dev team.
So is there any work around with CSS that I can achieve a navbar that will keep the navbar menu items/links justified even when the container it is in is re-sized.
Here's a Jsfiddle for you if you need it.
The .nav-justifed class is to be used with nav-tabs / nav-pills (see bootstrap docs) and not nav-bar. The two concepts are very different and should not be confused.
However, you can achieve the effect you are looking for by adding the following css:
.navbar-nav.nav-justified > li{
float:none;
}
nav-justifiednow plays nice with navbar-nav:
<ul class="nav navbar-nav nav-justified">
See updated jsFiddle.
If using LESS, you can do the following:
.navbar-nav {
.nav-justified;
}