I need to style the nav-tabs by their id. The code for this was working when it had been put in html between bootstrap and css loading, but when moved to base.css only some of this code works (first set of rules).
Please tell me what to do so that all the rules are applied:
HTML
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/base.css" />
<title>Exemplary CSS error</title>
</head>
<body>
<div class ="row" style = "margin-top: 20px; margin-left: 20px">
<ul class="nav nav-tabs" id="timespan-menu">
<li class="nav-item">
<a class="nav-link active" href="#daily">Daily</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#weekly">Weekly</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#monthly">Monthly</a>
</li>
</ul>
</div>
</body>
</html>
CSS
#timespan-menu .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
background: #CBCBCB;
border-bottom: 2px solid #343a40;
}
#timespan-menu .nav-tabs > li.active > a {
font-size: 13px;
color: #212529;
}
#timespan-menu .nav-tabs > li > a {
font-size: 13px;
color: #6c757d;
}
It's because in your CSS your second and third rules are being applied to child elements of the #timestamp-menu element which have the class .nav-tabs, whereas in your markup the #timespan-menu element has the .nav-tabs class itself.
It works if you just remove the spaces between #timespan-menu and .nav-tabs in your rules, e.g.:
#timespan-menu.nav-tabs > li.active > a {
font-size: 13px;
color: #212529;
}
You probably want to tidy your CSS up, though. If you're happy that the styling should be applied by ID then you don't really need to further specify the .nav-tabs class in your second and third rules.
Related
When you click on the dropdown button on the navbar(button labeled Dropdown), and then click off(anywhere in the page), you can see the dropdown button flash white briefly.
I've seen this quite similar bug: Bootstrap navbar "flashing" when clicking outside of menu to close it. But it, unfortunately, doesn't work(actually copy and pasted the exact same code in css).
Here's a minimal reproducible version of the bug on plunk: https://embed.plnkr.co/plunk/nBIvKcLMkYbey8Oa
Code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-static-top mb-0">
<ul class="nav navbar-nav">
<li class="nav-item dropdown" id="games-dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>asdf</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
nav {
background-color: #26445a !important;
border-color: #26445a !important;
margin: 0px !important;
}
.navbar a{
color: #EEFBFB !important;
}
.navbar-header a{
font-size: 1.45em !important;
}
.nav >li > a:hover, .nav > li > a:focus{
background-color: #335369 !important;
}
.nav-item{
background-color: #26445a !important;
font-size: 1.23em !important;
}
#games-dropdown > .dropdown-menu a{
background-color: #ffffff !important;
color: #000000 !important;
font-size: 1.2em !important;
}
#games-dropdown > .dropdown-menu a:hover{
background-color: #d1d1d1 !important;
color: #000000 !important;
}
Thanks a lot!
It's due to Bootstrap applying a background color on the focus and hover event.
So you can override this behavior
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover
{
background-color: unset !important;
}
I think that adding lots of new CSS classes might be confusing Bootstrap. In the CSS detailed at your sandbox link there are many different background commands all pointing in one way or another to your navbar and the links in your navbar. These could easily be getting in the way of each other. You don't especially have to add new CSS. You only need to edit the classes that already exist within Bootstrap nav. It's the focus specifically that is causing trouble.
.nav
.navbar-brand
.navbar-dropdown
.navbar-toggler-icon
.menu-item
.dropdown-item
Try removing all your background instructions to begin then add new backgrounds to the above.
I have a navigation bar, and I was wondering if it is possible to change the hover size in bootstrap 4? I want to make the size of the background on the menu links smaller. I have tried this method: How do i change the width of the hover in bs4 , but it does not work for me.
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Cuppela</title>
<script src="https://www.cuppela.com/cuppela/js/jquery.min.js" type="text/javascript"></script>
<script src="https://www.cuppela.com/cuppela/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://www.cuppela.com/cuppela/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body>
<div id="nav-menu">
<nav id="main-nav" class="navbar navbar-expand-md fixed-top">
<div class="container">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid" id="top-main">
<div id="top_text">
<h1>Cuppela Made With Sugar</h1>
<p>Delicious Homemade Cakes</p>
</div>
</div>
</div>
<div>
<h2>Test</h2>
</div>
</body>
</html>
This is my css:
body{
margin: 0px;
}
li a:hover {
background-color: #ff9900;
border-radius: 10px;
}
li a{
color: white !important;
}
#top-main{
background-image: url(../images/cake_six_two.jpg);
height: 100vh;
}
#nav-menu{
font-size: x-large;
position: relative;
}
#top_text{
color: white;
text-align: center;
position: relative;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
h1{
font-size: 500%;
}
p{
font-size: x-large;
}
h2{
text-align: center;
}
Edit: Added more description.
I suppose you want to change the size of the background on the menu links when you :hover over them. If that is the case, edit the padding of .nav-link (or remove the padding line completely) and you will end up with something like this:
As you can see no padding at all will give the impression of a bit more orange background above the links than below. This is a common quirk with padding in CSS, so I recommend you add for example padding: 0 0 .2rem which translates into zero padding on the top, right and left, and 0.2rem padding at the bottom of the element.
Result will then be:
You didn't clearly mention what you want, but if you want to change the font size, you can simply do font-size: 12px or any pixels you want. If you want to change the anchor tag's width, then you can decrease the padding like
.navbar .navbar-nav .nav-item .nav-link { padding: 5px // or anything you want, you can also make it 0 }
I need help with my horizontal nav-bar that is at the top of my webpage.I am using a CSS animation to make my nav-button's font-size increase on focus and hover. I only want my nav-bar to move when nav-items are focused or hovered. My only problem is that the content beneath the nav-bar moves down when my nav-button is focused or hovered. I only need help with making the content beneath my nav-bar unaffected by the growing font-size of my focused or hovered nav-buttons.
/*NAVBAR CSS STARTS HERE*/
nav {
margin-left: 15%;
}
.navbar {
list-style: none;
padding: 0px;
overflow: hidden;
display: inline;
text-align: center;
}
.navbar li{
display: inline;
}
.nav-link a {
margin-left: 1%;
padding: 14px 30px;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.548);
font-size: 20px;
color: rgb(255, 255, 255);
border-radius: 5px;
font-weight: bold;
letter-spacing: 5px;
}
.nav-link a:hover, .nav-link a:focus {
animation: grow 0.5s;
animation-fill-mode: forwards;
}
/*nav-bar css ends here*/
Here's the HTML below for one of the webpages on my website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="author" content="Maurice Rogers">
<title>My Short Bio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="backgroundImg">
<header id="page-top">
<h1><span>Maurice Rogers</span></h1>
<nav>
<ul class="navbar">
<li class="nav-link"><a class="nav-link"
href="index.html">Bio</a></li>
<li class="nav-link"><a class="nav-link" href="technical-
resume.html">Technical Resume</a></li>
<li class="nav-link"><a class="nav-link" href="my-
animations.html">Animations</a></li>
<li class="nav-link"><a class="nav-link" href="me-
surfing.html">Surfing</a></li>
</ul>
</nav>
</header>
<main>
<br/>
<h2><span>My Bio</span></h2>
<br/>
<div class="box">
<p>I love to code. I find it to be very fun, interesting, and
rewarding. You can <a href="technical-resume.html"
accesskey="t">find my Technical Resume here</a>. I also have other
cool interests. I've spent many hours making animations. You can
<a href="my-animations.html" accesskey="a">view my animations
here</a>. I've been surfing all my life. It really is one of my
favorite things to do. You can <a href="me-surfing.html"
accesskey="s">see me surfing here</a>.</p>
</div>
</main>
<footer>
<nav>
<a class="ftr-nav-link" href="index.html">Back to top</a>
</nav>
<h4 class="copy-right">© 2021 Maurice Rogers</h4>
</footer>
</div>
</body>
</html>
You could try putting a position: absolute on your ul tag and start from there.
I had to modify your code to get the desired result. I used transform: scale() to increase the font-size without affecting the buttons. Apparently if you use display: inline then scale() will not work so I changed around your code and use flexbox properties. Also there were a few issues with your html, you declared the class nav-link on both your a and li, so I removed the class from a. Hope this works for you.
/*NAVBAR CSS STARTS HERE*/
nav {
margin-left: 15%;
}
.navbar {
list-style: none;
padding: 0px;
overflow: hidden;
display: flex;
text-align: center;
}
.nav-link {
margin-left: 1%;
padding: 14px 30px;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.548);
font-size: 20px;
color: rgb(255, 255, 255);
border-radius: 5px;
font-weight: bold;
letter-spacing: 5px;
transition: transform .5s;
}
.nav-link a {
display: block;
color: white;
text-decoration: none;
}
.nav-link a:hover{
transform: scale(1.2);
}
/*nav-bar css ends here*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="author" content="Maurice Rogers">
<title>My Short Bio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="backgroundImg">
<header id="page-top">
<h1><span>Maurice Rogers</span></h1>
<nav>
<ul class="navbar">
<li class="nav-link">Bio</li>
<li class="nav-link"><a href="technical-
resume.html">Technical Resume</a></li>
<li class="nav-link"><a href="my-
animations.html">Animations</a></li>
<li class="nav-link"><a href="me-
surfing.html">Surfing</a></li>
</ul>
</nav>
</header>
<main>
<br/>
<h2><span>My Bio</span></h2>
<br/>
<div class="box">
<p>I love to code. I find it to be very fun, interesting, and
rewarding. You can <a href="technical-resume.html"
accesskey="t">find my Technical Resume here</a>. I also have other
cool interests. I've spent many hours making animations. You can
<a href="my-animations.html" accesskey="a">view my animations
here</a>. I've been surfing all my life. It really is one of my
favorite things to do. You can <a href="me-surfing.html"
accesskey="s">see me surfing here</a>.</p>
</div>
</main>
<footer>
<nav>
<a class="ftr-nav-link" href="index.html">Back to top</a>
</nav>
<h4 class="copy-right">© 2021 Maurice Rogers</h4>
</footer>
</div>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I cant seem to change the font color in my navbar, the other elements in my navbar css works but not the font color for some reason. I have tried to change the class but then my other elements in the css wont work. I cant seem to find the problem, though this is my first time using bootstrap.
CSS
.navbar {
background-color: white;
border: none;
color: #0000;
}
.navbar-brand {
font-size: 50px;
}
HTML
<head>
<title></title>
<meta charset="utf=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar=header">
<a class="navbar-brand" href="#">TRAVELLING</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
.navbar {
background-color: white;
border: none;
color: #000;
}
.navbar .navbar-nav li > a{
color: orange !important;
}
.navbar .navbar-brand {
font-size: 50px;
color: blue !important;
}
<head>
<title></title>
<meta charset="utf=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">TRAVELLING</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
Code
.navbar {
background-color: white;
border: none;
color: black;
}
.navbar-brand {
font-size: 50px;
}
.navbar a{
color:red;
}
.navbar li a{
color:red;
}
You have assigned a wrong value to color property. It should be 3 or 6 digits like color: #000 or color: #000000
CSS
.navbar {
background-color: white;
border: none;
/*color: #0000;*/ color: #000;
}
.navbar ul li > a{
color: #f00;
}
You can also use inline css in your navbar where you want to change. Try something like this
<nav class="navbar navbar-default" style="background-color:white;border:none;color:#000;">
Try something like:
.navbar {
background-color: white !important;
border: none;
}
.navbar-brand {
font-size: 50px;
}
.navbar *{
color: #000 !important; // should set font color for element contain text
}
As you can see, On hovering a li element,the right background image also disappears along with it with the help of background-image:none property. However only the hovered li disappears but the background image of previous li is still seen.Although a minor , I would like it removed. Can anyone tell me how?. :)
As I am new , Im not allowed to post images. Check the website out at http://ashwin931996.webege.com/
Thanks a lot btw
Use this jquery. Here i paste the full html code. use this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<link type="text/css" rel="stylesheet" href=""/>
<style type="text/css">
#header ul {
padding-top:1em;
}
#header ul li a.currentpage {
color:white !important;
background-color: #F96E5B !important;
}
#header ul li a {
text-decoration: none;
color:#676767;
font-family: 'Oswald', sans-serif;
font-size: 1em;
float:right;
line-height: 3em;
padding-right: 1em;
padding-left:1em;
}
#header ul li a.active
{background-color: #F96E99;
color: white;}
</style>
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.jpg">
<ul>
<li>
<a class="one active" href="#">CONTACT</a>
</li>
<li>
<a class="two" href="#">GALLERY</a>
</li class="one">
<li>
<a class="three" href="#">EVENTS</a>
</li>
<li>
<a class="four" href="#">HOME </a>
</li>
</ul>
</div>
<script type="text/javascript">
$("#header ul li a").click( function() {
$("#header ul li a").removeClass("active");
$(this).addClass("active");
})
</script>
</body>
</html>
Demo: http://jsfiddle.net/PbMg2/2/