I'm trying to position a DIV on top of the Bootstrap fixed navbar at the top. I've tried z-index and absolute positioning etc, but no matter what I do, the Bootstrap navbar seems to have ultimate topmost priority.
Here's the codepen: http://codepen.io/anon/pen/kkRLKA
Here's my code:
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Our Mission</li>
<li>Who We Are</li>
<li>What We Have Done</li>
<li>The State of Things</li>
</ul>
</div>
</div>
</nav>
<div class="LogoContainer">
</div>
<div class="jumbotron">
</div>
</body>
And the CSS:
body { position:relative; }
div#navbar > ul li
{
padding-right:5vw;
}
#media only screen and (max-width: 1230px)
{
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
.LogoContainer
{
width:200px;
height:200px;
background-color:blue;
border:1px solid red;
position:absolute;
left:5%;
top:0;
z-index:1;
}
.jumbotron
{
height:70vh;
margin-bottom:0;
position:relative;
}
div.donation-form
{
border:1px solid red;
width:19%;
padding:7vh 0 5vh 0;
position:absolute;
right:5%;
bottom:-10vh;
}
div.donation-form input[type=text]
{
display:block;
width:60%;
height:50px;
margin:0 auto 8px auto;
padding-left:15px;
}
div.donation-form input[type="submit"]
{
display: block;
width:60%;
height:60px;
margin:20px auto 0 auto;
background-color: darkgray;
border:none;
}
div.donation-form p
{
font-size:1.1rem;
text-align:center;
}
As you can see, the top 1/4 of the blue box is obscured by the navbar. How do I make it overlap the navbar? I've also tried z-index:999999999 !important but it's useless.
It looks pretty weird in the snippet, but check it out on the jsfiddle. Is that what you wanted?
https://jsfiddle.net/t8j6pgg8/
body {} div#navbar > ul li {
padding-right: 5vw;
}
#media only screen and (max-width: 1230px) {
.navbar-header {
float: none;
}
.navbar-left,
.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display: block !important;
}
}
.LogoContainer {
width: 200px;
height: 200px;
background-color: blue;
border: 1px solid red;
position: absolute;
left: 5%;
top: 0;
z-index: 9999;
}
.jumbotron {
height: 70vh;
margin-bottom: 0;
position: relative;
}
div.donation-form {
border: 1px solid red;
width: 19%;
padding: 7vh 0 5vh 0;
position: absolute;
right: 5%;
bottom: -10vh;
}
div.donation-form input[type=text] {
display: block;
width: 60%;
height: 50px;
margin: 0 auto 8px auto;
padding-left: 15px;
}
div.donation-form input[type="submit"] {
display: block;
width: 60%;
height: 60px;
margin: 20px auto 0 auto;
background-color: darkgray;
border: none;
}
div.donation-form p {
font-size: 1.1rem;
text-align: center;
}
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>Our Mission
</li>
<li>Who We Are
</li>
<li>What We Have Done
</li>
<li>The State of Things
</li>
</ul>
</div>
</div>
</nav>
<div class="LogoContainer">
</div>
<div class="jumbotron">
</div>
</body>
Put div with your logo class here(3th row of code) and delete previous div with logo class of course.
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="LogoContainer"></div>
<div class="container-fluid">
Related
I am new to stack-overflow so hope I am posting this question right. I have attached a screenshot of my problem with the aligning.
I am trying to achieve for the writing in the nav bar to align properly so it is straight and doesn't look out of line if you understand what i am trying to say?
i have tried adjust the margin and the padding several times and still no luck so I am unsure what I am doing wrong.
Any suggestions would be great and will be very appreciated.
Picture of page
* {
margin: 0px;
padding: 0px;
}
html {
min-height: 100vh;
}
body {
font-family: 'Staatliches', cursive;
background-image: url(images/trees.jpg);
background-size: cover;
background-repeat: no-repeat;
background-size: 1920px 700px;
}
img {
float: left;
padding-bottom: 7px;
}
span {
padding: 20px;
}
a {
text-decoration: none;
color: #fff;
}
.nav {
background-color: #100D0E;
padding: 15px;
text-align: right;
overflow: hidden;
padding-bottom: 15px;
}
#matty {
font-size: 18px;
float: left;
padding-left: 5px;
padding-bottom: 3px;
}
span:hover {
border-bottom: 4px solid #fff;
}
label {
color: #fff;
margin: 0 40px 0 0;
font-size: 30px;
display: none;
}
#toggle {
display: none;
}
#media screen and (max-width: 723px) {
label {
display: block;
cursor: pointer;
}
body {
background-image: url(images/grey.jpg);
background-size: cover;
background-repeat: no-repeat;
background-size: 1920px 700px;
}
img {
padding-top: 10px;
}
.nav {
text-align: right;
}
#matty {
padding-top: 13px;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
span:hover {
display: block;
}
.menu a {
display: block;
margin: 0;
}
#toggle:checked + .menu {
display: block;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Basic | HTML | CSS</title>
<link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="nav">
<img src="images/legohead.png" width="25px" height="25px">
<a id="matty" href="index.html">Matty</a>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<span>Services</span>
<span>Store</span>
<span>Work</span>
<span>Gallery</span>
<span>Team</span>
<span>Contact</span>
<span>Pricing</span>
</div>
</div>
</body>
</html>
If you are trying to get the text of the menu items to be to the left of the screen, remove text-align:right; from your nav class
If you use bootstrap, you can do something like the following:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Index Page</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
</div>
</div>
</div>
Im assuming you want to vertically align your menu items to the center? I like to use flexbox, but not sure if that is what you need in this particular case. Anyway, you can add flexbox to the nav class like this.
.nav{
display: flex;
align-items: center;
}
i'm trying to change the width of my navbar which is fixed and also has a navbar-collapse property that i want to keep when screen size changes.
I also added in the Bootstrap i am using for this page, so at the moment with the code below, the navbar is fixed but is full width, it collapses when you change to mobile site, so the only thing i want is to change the width from full width so that there is atleast 30% open space on either side of the navbar so it will be centred to the page.
and also adding a logo/image to the navbar only when its collapsed
Hope you can help me!
<html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.navbar-nav.nav-justified > li{float:none; }
.navbar{
background-color:white;
font-family: Amatic SC;
border:none;
font-size: 25px;
letter-spacing: 1px;
text-align:center;
}
.navbar:hover,
.navbar:active {
color: black;
transition: background-color 0.3s ease-oin,
color 0.3s ease-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: black;
}
#media (max-width: 981px) {
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0%;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" "col-xs- col-xs-offset-0 col-md-6 col-md-offset-3" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" style="text-align:center" >
<ul class="nav navbar-nav nav-justified">
<li id="scrollDetails">Details</li>
<li id="scrollDirections">Directions</li>
<li id="navRsvp">RSVP</li>
<li id="scrollBucket">Bucket List</li>
<li id="scrollAccommodation">Accommodation</li>
</ul>
</div>
</nav>
</body>
</html>
You have to modify the width and centrally align your code in the media queries for the expected behaviour in mobile view.
You have to add the following css:
#media (max-width: 981px) {
.navbar {
width: 30%;
margin: auto;
}
}
Refer code:
.navbar-nav.nav-justified > li {
float: none;
}
.navbar {
background-color: white;
font-family: Amatic SC;
border: none;
font-size: 25px;
letter-spacing: 1px;
text-align: center;
}
.navbar:hover,
.navbar:active {
color: black;
transition: background-color 0.3s ease-oin, color 0.3s ease-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: black;
}
#media (max-width: 981px) {
.navbar {
width: 30%;
margin: auto;
}
.navbar-left,
.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-fixed-top {
top: 0%;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display: block !important;
}
}
<nav class="navbar navbar-inverse navbar-fixed-top col-xs-offset-0 col-md-6 col-md-offset-3">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" style="text-align:center">
<ul class="nav navbar-nav nav-justified">
<li id="scrollDetails">Details
</li>
<li id="scrollDirections">Directions
</li>
<li id="navRsvp">RSVP
</li>
<li id="scrollBucket">Bucket List
</li>
<li id="scrollAccommodation">Accommodation
</li>
</ul>
</div>
</nav>
At this moment I am busy with making a nav exactly like this:
Right now I have made this:
How can I fix that logo and dividers like the first image?
I make the website with Bootstrap and I have add some elements you see below in
html, body{
}
nav{
background:#fff;
width:100%;
padding:0px 30px;
}
.navbar-header{
display:block;
text-align:center;
height:80px;
}
.navbar-header img{
margin:0px auto;
height:45px;
}
a.navbar-brand{
padding:20px 30px;
position: absolute;
width:auto;
left:0;
top:0;
text-align:center;
margin:auto;
background-color: red;
}
.navbar-collapse.collapse{
padding:0px;
white-space: nowrap;
}
.navbar{
background:#fff;
width:100%;
margin:0px;
padding-left: 0px;
padding-right: 15px;
z-index:10;
border: 0px solid transparent;
border-radius:0px
}
.navbar > div{
margin-left: 0px;
margin-right: 0px;
}
.collapse, .nabar-right{
margin-right: 0px!important;
}
.navbar ul li a{
background:none;
text-transform:uppercase;
font-family: 'Open Sans', sans-serif;
font-weight:300;
font-size:14px;
color:#000;
letter-spacing: 0.035em;
text-decoration: none;
}
ul.nav li.open ul.dropdown-menu li{
padding:0px 0px;
}
.navbar ul li a:hover{
background:#ffffff;
color:#22257a!important;
}
.navbar ul li a:active{
background:none;
}
.nav-selected{color:#22257a!important; font-weight:700;}
.navbar a.nav-selected{color:#22257a!important; font-weight:700;}
.navbar ul li.nav-path-selected .dropdown-toggle{color:#22257a; font-weight:700;}
/*-------------------------------------------------*/
.caret {
color: #000000;
-webkit-transition: color 0.2s; /* Safari */
transition: color 0.2s;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
background-color: transparent;
color: #000000 !important;
}
.dropdown-menu {
border:1px solid #f1f1f1;
border-radius: 0;
box-shadow: none;
margin-top: -15px;
padding:0px 0px;
}
.dropdown-menu li {
padding: 2px 16px 2px 16px;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
background-color: transparent;
}
.dropdown-menu a {
color: #777777 !important;
}
.dropdown-menu > li > a {
padding: 8px 14px;
}
div#ccm-highlighter{z-index:1000; min-height:30px;}
hr {
width: 120px;
border-top: 4px solid black !important;
}
i {
color: white;
}
.intro-top {
width: 100%;
height: 50px;
background-color: red;
float: left;
}
header {
width: 100%;
height: 50px;
background-color: #4d4d4d;
}
header p{
color:white;
}
header i {
float:left;
padding-right: 10px;
}
a{
text-decoration: none !important;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport">
<title>Title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobiel.css">
<link rel="stylesheet" href="css/tablet.css">
<link rel="stylesheet" href="css/desktop.css">
<link rel="stylesheet" href="typography.css">
<link href='######' rel='stylesheet' type='text/css'>
<!--[if gte IE 9]><style type="text/css">.gradient {filter: none;}</style><![endif]-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<a class="navbar-brand" href="#">
<img src="http://itavisen.no/wp-content/uploads/imported/5064692.jpg">
</a>
</div>
<div class="col-sm-2">
<i class="fa fa-phone" aria-hidden="true"></i><p>06 12345678</p>
</div>
<div class="col-sm-2">
<i class="fa fa-envelope" aria-hidden="true"></i><p>#mail.nl</p>
</div>
</div>
</div>
</header>
<div class="container">
<nav class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<span>Menu</span>
<span class="glyphicon glyphicon-menu-hamburger">
</button>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown">
page2 <span class="caret"></span>
<ul class="dropdown-menu arrow_box">
<li>page1drop</li>
<li>page2drop</li>
</ul>
</li>
<li>page3</li>
<li>Page4</li>
<li role="separator" class="divider">Contact</li>
</ul>
</div>
</nav>
</div>
<div class="intro-top">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Doe,
For the logo you may try z-index to put it in the front of the webpage.
And for the "li" you should use padding and border to get the same result.
If you want to practice by watching code you should find some bootstrap menu template.
e.g. : http://blog.themearmada.com/20-inspiring-bootstrap-menu-examples/
I have header nav bar and Side nav bar named vertical menu. I couldn't fix the position of my nav bar close to float left. It is having some gaps, I tried adjusting the position still missing something. Please see image for reference
In case if I include another menu now , if I click profile that also kind of not working out, because of the position of the side nav bar.
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar top-color">
<!--nav header Div-->
<div class="container-fluid">
<div class="col-sm-1"><a class="navbar-head" style="text-decoration:none; color:white;" href="#"><h1>Bootstrap Case</h1></a>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse verticalmenu" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Main Menu</a>
<br><br>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-dashboard vmenu"></span> Dashboard
</li>
<li class="active"><span class="glyphicon glyphicon-user vmenu"></span> Profile
</li>
<li><span class="glyphicon glyphicon-edit vmenu"></span>Skill Test
</li>
<li><span class="glyphicon glyphicon-tags vmenu"></span>Interviews
</li>
<li><span class="glyphicon glyphicon-off vmenu"></span>Logout
</li>
</ul>
</div>a
<!-- /.navbar-collapse -->
</nav>
CSS :
<style>
.top-color {
background-color: aquamarine;
margin-bottom: 0;
}
.firstmenu {
margin-bottom: 0;
}
#media (min-width: 768px) {
.top-color{
width:100%;
margin: 0;
height:5em;
padding-top:10px;
text-align: center;
background: #3399ff;
padding-bottom: 30px;
}
.firstmenu .navbar-brand {
padding-left:155px;
}
.firstmenu li{
padding-left:50px;
}
.firstmenu .active{
width:250px;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.verticalmenu .navbar-toggle {
display: none ;
}
.navbar.verticalmenu {
float: left;
width: 200px;
height: 100%;
}
.verticalmenu .collapse.navbar-collapse.navbar-ex1-collapse {
display: block;
float: left;
}
.verticalmenu .active {
width:200px;
}
.verticalmenu .navbar-collapse {
height: auto;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left: 0;
padding-right: 0;
}
.verticalmenu .navbar-collapse.collapse {
display: block !important;
width: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.verticalmenu .navbar-collapse.in {
overflow-x: visible;
}
.verticalmenu .navbar {
max-width: 100px;
margin-right: 0;
margin-left: 0;
}
.verticalmenu .navbar-nav,
.verticalmenu .navbar-nav > li,
.verticalmenu .navbar-left,
.verticalmenu .navbar-right,
.verticalmenu .navbar-header {
float: none !important;
}
.verticalmenu .navbar-right .dropdown-menu {
left: 0;
right: auto;
}
.verticalmenu .navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
}
.vmenu{
text-align: center;
}
}
</style>
change the below selector
.navbar.verticalmenu {
width: 200px;
height: 100%;
}
Remove the float:none from .verticalmenu .navbar-header.
I am trying to change the background color and Text Color of the navigation bar links on hover however I cannot get it to work. No matter what I do there doesnt seem to be any effect.
I have never had a problem when using Pure CSS, but its just mostly with Bootstrap I'm having this problem
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Soni's Computer Repair</title>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="logo">
<center>
<a class="navbar-brand" href="#"><img src="Final.png"/></a>
</center>
</div>
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<h6 class="text-center">Copyright © Soni Computer Repairs</h6>
<p class="text-center">www.SoniRepairs.com</p>
</div>
</footer>
</body>
</html>
CSS:
.nav, .navbar-nav {
display: inline-block;
margin:0;
float:none;
margin-top: -15px;
}
.navbar-nav li {
padding-left: 40px;
padding-right: 40px;
}
.navbar .navbar-inverse .navbar-fixed-top > li > a:hover {
color: cyan;
}
.navbar-brand {
float: none;
}
.navbar-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:100%;
}
.navbar .navbar-collapse {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
.logo img {
height:80px;
margin-top: -15px;
}
.logo {
width: 40%;
margin: 0 auto;
}
#media screen and (max-width: 700px) {
.navbar-nav{
margin-left: auto;
margin-right: auto;
display: table;
table-layout: fixed;
float:none;
margin-top: 10px;
}
.container img {
height:50px;
display: inline-block;
margin-top: -15px;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar > .container {
text-align: center;
}
.collapse.navbar-collapse {
width: auto;
clear: none;
}
}
You html code shows navbar-static-top
<div class="navbar navbar-inverse navbar-static-top"></div>
and in your css you are using .navbar-fixed-top
.navbar .navbar-inverse .navbar-fixed-top > li > a:hover {
color: cyan;
}
Updated fiddle https://jsfiddle.net/3ge0b6nr/1/
Change your code to
.navbar.navbar-inverse.navbar-static-top li > a:hover {
color: cyan;
}
Here is a Sample jsFiddle based on your code.
Just add this css code to your css :
.navbar-inverse .navbar-nav > li > a {
color: red;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:active,
.navbar-inverse .navbar-nav > li > a:focus{
color: green;
background-color: red;
}
Just change it to which color you want.