This question already has answers here:
Change color of bootstrap navbar on hover link?
(16 answers)
Closed 2 years ago.
I want to change the links color in the navbar when the mouse hovers at each one of them.
This is my code :
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"></a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>Product</li>
<li>About us</li>
<li>Contact us</li>
<li class="your_account">Your Account</li>
</ul>
<!-- Search form -->
<form class="form-inline d-flex justify-content-center md-form form-sm">
<input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Inspire yourself" aria-label="Search">
<i class="fas fa-search"></i>
</form>
</div>
</nav>
</header>
I tried to change it with this code, but didn't work!
nav ul li:hover {
color: red;
}
Any suggestions?
The colors of the links are overridden by the a tags' default styles, so you should apply it to the a tag, not the li tag:
nav ul li:hover a {
color: red;
}
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Product</li>
<li>About us</li>
<li>Contact us</li>
<li class="your_account">Your Account</li>
</ul>
</nav>
You need to give the hover effect on the anchor tags and not on the <li>
nav ul li a:hover {
color: red;
}
nav ul li a:hover {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"></a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>Product</li>
<li>About us</li>
<li>Contact us</li>
<li class="your_account">Your Account</li>
</ul>
<!-- Search form -->
<form
class="form-inline d-flex justify-content-center md-form form-sm"
>
<input
class="form-control form-control-sm mr-3 w-75"
type="text"
placeholder="Inspire yourself"
aria-label="Search"
/>
<i class="fas fa-search"></i>
</form>
</div>
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</body>
</html>
</body>
</html>
nav ul li a:hover {
color: red;
}
or
.navbar-nav a:hover{
color: red;
}
Related
When trying to position my search bar at equal y level to the "Art Store" text, it does not do this.
<div id="logoRow" >
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
That is my text for the art store and then the search bar. My search bar looks like this with none of my own CSS:
When I add my own CSS, it looks like this
.searchBar {
width: 250px;
padding: 10px;
margin-right: 50px;
}
I want to position my search bar on the right side positioned at an equal y level to the Art Store text. When I use float: right, it positions the search bar down into the bottom navbar...?
This is not what I want to happen. I'm unsure why this is happening as it happens even when I set the position to relative. Any help would be greatly appreciated. Below is a little bit more code if that helps. (includes the bottom navbar)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter5</title>
<!-- Custom styles for this template -->
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assign3.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow" >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to Art Store, Login or Create a new Account</a>
</div>
<ul class="nav navbar-nav moveRight">
<li>My Account</li>
<li>Wish List</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</div>
</nav>
</div>
<!-- end topHeaderRow -->
<div id="logoRow" >
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<!-- end logoRow -->
<div id="mainNavigationRow" >
<nav class="navbar navbar-default">
<ul class="nav navbar-nav mynavbar">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Works</li>
<li>Artists</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Specials
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Special 1</li>
<li>Special 2</li>
</ul>
</li>
</ul>
</div>
</nav>
</nav>
</div>
I'am added a code into your case
#logoRow {
display:flex;
width:100%
}
#logoRow h1 {
margin-top:0;
}
#logoRow form.searchBar {
width:40%
display:inline-block;
margin-left:auto;
}
I'm used margin-top:0px for remove margin from bootstrap into #logoRow
So will get output like this
#logoRow {
display:flex;
width:100%
}
#logoRow h1 {
margin-top:0;
}
#logoRow form.searchBar {
width:40%;
display:inline-block;
margin-left:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter5</title>
<!-- Custom styles for this template -->
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assign3.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to Art Store, Login or Create a new Account</a>
</div>
<ul class="nav navbar-nav moveRight">
<li>My Account</li>
<li>Wish List</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</div>
</nav>
</div>
<!-- end topHeaderRow -->
<div id="logoRow">
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<!-- end logoRow -->
<div id="mainNavigationRow">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav mynavbar">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Works</li>
<li>Artists</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Specials
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Special 1</li>
<li>Special 2</li>
</ul>
</li>
</ul>
</div>
</nav>
</nav>
</div>
This should work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter5</title>
<!-- Custom styles for this template -->
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assign3.css" rel="stylesheet">
<style>
.searchBar {
width: 250px;
padding: 10px;
margin-left: auto;
}
</style>
</head>
<body>
<header>
<div id="topHeaderRow" >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to Art Store, Login or Create a new Account</a>
</div>
<ul class="nav navbar-nav moveRight">
<li>My Account</li>
<li>Wish List</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</div>
</nav>
</div>
<!-- end topHeaderRow -->
<div id="logoRow" >
<h1>Art Store</h1>
</div>
<!-- end logoRow -->
<div id="mainNavigationRow" >
<nav class="navbar navbar-default">
<ul class="nav navbar-nav mynavbar">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Works</li>
<li>Artists</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Specials
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Special 1</li>
<li>Special 2</li>
</ul>
</li>
</ul>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</nav>
</div>
</header>
</body>
</html>
Hey if i understand correctly you can use display flex to get your desired results. See the below css for how I solved it. click here for a screenshot
#logoRow{
display: flex;
align-items: center;
}
#logoRow h1{
margin: 2rem;
}
This can help:
.searchBar {
position:absolute;
float:right;
width: 250px;
padding: 10px;
margin-right: 50px;
}
I've been trying to edit one of the nav bars from bootstrap website and would like to make a costume input form with a button with an external image , i've tried messing with css but the code i was taking notes from was different from this one and it didn't work.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!-- NAVBAR -->
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Post layout</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" >Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shortcodes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div class="search-bar">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><img src="\searchicon.png"></button>
</form>
</div>
</div>
</nav>
</div>
<!-- /NAVBAR -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
You can do something like
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.parent{
position: realtive;
}
.image {
position: absolute;
top: 10px;
left: 100px;
}
.input-box {
height : 20px;
}
</style>
</head>
<body>
<div class="parent">
<input class="input-box">
<button class="image"><img src="avatar.png" alt="Avatar" style="width:15px"></button>
</div>
</body>
</html>
I'm unable to get a custom CSS sheet to work in the navigation bar. I've an angular application, where I'm adding a CSS file to override the anchor tag colors inside the navbar. Since the freelancer css files I'm using have made the anchor tag white in color, and there's a place in the Nav bar HTML, where I want to use anchor tag in a readable color, I've written custom CSS file.
<!DOCTYPE html>
<html ng-app="jargoViewer">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Jargo Foods Pvt Ltd.</title>
<link href="vendor/font-awesome/css/style.css" rel="stylesheet" type="text/css">
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet">
<!-- Jargo CSS Styles -->
<link href="css/jargo.css" rel="stylesheet" type="text/css">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' type='text/css' media='all' />
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-cookies.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js'></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
-->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/jquery.easing/js/jquery.easing.min.js"></script>
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<script src="js/freelancer.min.js"></script>
<script src="app.js"></script>
<script src="RestService.js"></script>
<script src="UserCart.js"></script>
<script src="ProdSearchService.js"></script>
<script src="ProductsSearchController.js"></script>
<script src="MainController.js"></script>
<script src="ProductController.js"></script>
<script src="NavController.js"></script>
<script src="CheckoutController.js"></script>
<script src="PaymentController.js"></script>
<script src="LoginModal.js"></script>
<script src="LoginModalCtrl.js"></script>
<script src="LoginService.js"></script>
<script src="CheckoutPaymentService.js"></script>
<script src="OrdersController.js"></script>
<script src="SessionInterceptor.js"></script>
<!-- Payment Gateway Lib -->
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
</head>
<body id="page-top" class="index">
<div id="skipnav">Skip to main content</div>
<!-- Add the Navigation Bar on top -->
<div ng-include="'nav.html'"></div>
<!-- This is where the Actual Content would go -->
<div ng-view autoscroll="true"></div>
<!-- Add the footer at bottom -->
<div ng-include="'footer.html'"></div>
</body>
</html>
My CSS file is as follows (jargo.css). Notice the use of a new class called cart-table-link:
.cart-table-link a{
color: #FF8B03 !important;
}
.cart-table-link li a{
color: #FF8B03;
}
.cart-table-link li a:hover{
color: #18BC9C;
}
.cart-table-link li a:focus,
.cart-table-link li a:active{
color: #FF8B03;
}
.cart-table-link li.active a{
color: #FF8B03;
background: #18BC9C;
}
.cart-table-link li.active a:hover,
.cart-table-link li.active a:focus,
.cart-table-link li.active a:active{
color: #FF8B03;
background: #18BC9C;
}
My portion of nav.html, which contains a DropDown "Cart" Nav Element, which when clicked opens a Table with row entries for each product in the Cart, and finally, at the end, a "View Cart" and a "Checkout" anchor element. Each row entry in the Cart table contains an anchor tag with name of the Product Item, which if clicked should take user to the Product details page. Below is nav.html:
<!-- Navigation -->
<!--<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom"> -->
<nav id="mainNav" class="navbar navbar-default navbar-static-top navbar-custom">
<div class="container-fluid" ng-controller = "NavController">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">Jargo Foods</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hidden">
</li>
<li class="page-scroll">
Products
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
<!-- Search Starts -->
<li>
<!--
<div class="col-sm-3 col-md-3 pull-right">
-->
<div>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" ng-model = "searchtext" class="form-control" placeholder="Search" name="srch-term" id="srch-term"/>
<div class="input-group-btn">
<button ng-click = "search()" class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</li>
<!-- Cart Starts -->
<!--<div class="navbar-brand navbar-right">-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Cart
<span id="cart-total" ng-show ="userCart.cart_size">{{userCart.cart_size}} item(s)</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!--
<div >{{userCart.cart_products}}</div>
<div class="row" ng-repeat="obj in userCart.cart_prod_ids">{{obj}}</div>
<div class="row" ng-repeat="(id, obj) in userCart.cart_products">{{id}} {{obj}}</div>
-->
<li>
<!--
<table class="table table-striped hcart">
-->
<table>
<tbody>
<tr ng-repeat="(id, itemObj) in userCart.cart_products">
<td class="text-center">
<a ng-href="#/product/{{itemObj.ID}}">
<img src="img/others/cart.png" alt="image" title="image" class="img-thumbnail img-responsive"/>
</a>
</td>
<td class="text-left" class="col-md-2">
<a class="cart-table-link" ng-href="#/product/{{itemObj.ID}}">{{itemObj.ItemName}}</a>
</td>
<td class="text-right">x {{itemObj.Quantity}}</td>
<td class="text-right">₹ {{itemObj.Quantity * itemObj.CostPerUnit}}</td>
<td class="text-center">
<i class="fa fa-times" ng-click = "remInCart(itemObj.ID, 1)" ></i>
</td>
</tr >
</tbody>
</table>
</li>
<li>
<table class="table table-bordered total">
<tbody>
<tr>
<td class="text-right"><strong>Sub-Total</strong></td>
<td class="text-left">₹ {{userCart.cart_val}}</td>
</tr>
<tr>
<td class="text-right"><strong>VAT (5.5%)</strong></td>
<td class="text-left">₹ {{userCart.cart_val * 0.055 | number:2}}</td>
</tr>
<tr>
<td class="text-right"><strong>Total</strong></td>
<td class="text-left">₹ {{userCart.cart_val * 1.055 | number:2}}</td>
</tr>
</tbody>
</table>
</li>
<li>
<p class="text-right btn-block1">
View Cart
<a class = "button cart-table-link" href="#/checkout">Checkout</a>
</p>
</li>
</ul>
</div>
</ul>
</li>
</div> <!-- /.navbar-collapse -->
</nav> <!-- /.container-fluid -->
Just search for the reference to the cart-table-link in the nav.html file.
Despite the above changes, the cart-table-link CSS is most likely not even recognized. Notice the image (chrome inspection)
Any clue where I'm going wrong?
Your CSS is not correct.
The class cart-table-link is the a element.
a.cart-table-link {
color: #FF8B03;
}
I removed also the !important because having a.cart-table-link will have more hierarchy than the other styles that I saw.
This question already has answers here:
Center content in responsive bootstrap navbar
(12 answers)
Closed 6 years ago.
Here is my code, I have tried many things, help me Obiwan! I tried to do a container tag, ro response to css.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- This sets up bootstrap 3-->
<meta charset="utf-8">
<meta name="veiwport" content="width-device-width, initial-scale-1">
<!-- this sets initial zoom when page is loaded -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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"></script>
<!-- links css -->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Lauren Neely</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Gallery
</li>
<li>Sketchbook + Misc
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
You can add in your css:
#media (min-width: 768px){
.navbar-nav{
text-align:center;
float:none;
}
.navbar-nav li{
float:none;
display:inline-block;
}
}
with float: none you set central align to your .navbar-nav
and setting #media (min-width: 768px) you can apply these rules only for desktop and tablet views. For mobile bootstrap handle navbar in responsive way, so is not necessary.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- This sets up bootstrap 3-->
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale-1">
<!-- this sets initial zoom when page is loaded -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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"></script>
<!-- links css -->
<style>
#media (min-width: 768px)
.navbar-nav{
text-align:center;
float:none;
}
.navbar-nav li{
float:none;
display:inline-block;
}
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Lauren Neely</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Gallery
</li>
<li>Sketchbook + Misc
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
I am having problems with the gap between header and navbar. I have no idea how to get rid of that gap. I would be grateful if anyone here would know how to repair that issue.
<!DOCTYPE html>
<html lang=en>
<html>
<head>
<script src=java.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="icon" type="image/jpg" href="link"> <!--browser icon-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<title>Browser page name</title><!--insert page name-->
</head>
<body>
<div class="body">
<div class="jumbotron header">
<div class="container text-center">
<h1>Business Name</h1> <!--big header name-->
<p>Motto or slogan</p> <!--smaller text below header name-->
</div> <!--end of container text center div-->
</div> <!--end of jumbotron header div-->
<!--start of navigation-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<!--end of navigation-->
</div><!--end of body div-->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
css
.header /* Header settings */
{
background-color:#000 !important; /*background color black*/
color:#fff !important; /*font color white*/
height:200px; /*height of the whole element*/
font-family:Impact, Charcoal, sans-serif; /*font of the text*/
}
body /*background of the page*/
{
background:#ffb3b3 !important; /*background color of the whole page*/
}
Please help me with this as this looks ugly.
The Jumbotron class has 30px bottom margin by default. Change the jumbotron class to have margin-bottom:0; Here is a fiddle
Because you have .jumbotron class which has margin-bottom:30px by default in Bootstrap.
So you need to reset it, using margin-bottom:0
Note:
avoid using !important , it is bad practice.
you have 2 bootstrap-min.js files, when you just need one.
.header {
/* Header settings */
background-color: #000
/*background color black*/
color: #fff
/*font color white*/
height: 200px;
/*height of the whole element*/
font-family: Impact, Charcoal, sans-serif;
/*font of the text*/
}
body {
/*background of the page*/
background: #ffb3b3
/*background color of the whole page*/
}
.body .jumbotron {
margin-bottom: 0
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="body">
<div class="jumbotron header">
<div class="container text-center">
<h1>Business Name</h1>
<!--big header name-->
<p>Motto or slogan</p>
<!--smaller text below header name-->
</div>
<!--end of container text center div-->
</div>
<!--end of jumbotron header div-->
<!--start of navigation-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1
</li>
<li>Page 1-2
</li>
<li>Page 1-3
</li>
</ul>
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</nav>
<!--end of navigation-->
</div>
<!--end of body div-->