I'm learning how to create wordpress theme using Bootstrap.
This is the HTML code -
<body>
<div class="container">
<div class="row">
<div class="col-sm-12" id="site_header">
<hr>
<h1>CYBER<sup>FOSTERS</sup></h1>
<hr>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CF</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Program Implementation</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
and this is the CSS code
root
display: block;
}
body {
background-color: lightgrey;
}
#site_header {
background-color: white;
margin:10px 0px 0px 0px;
text-shadow: 2px 2px 0px #fff, 4px 4px 0px rgba(0, 0, 0, 0.1);
border-radius: 2px;
box-shadow: 0px 3px 3px grey;
}
#site_header h1 {
font-family: 'Roboto Condensed', sans-serif;
font-size: 50px;
text-align: center;
}
.navbar-default {
background-color: white;
border-color: white;
border-radius:2px;
margin-top:10px;
font-family:monospace;
text-transform: uppercase;
border-radius: 2px;
box-shadow: 0px 3px 3px grey;
}
The website currently looks like this -
I'm having trouble increasing the width of the navigation bar so that it aligns with the div block above it. How should I proceed?
You have to put your navigation block in other div class .row
You can checkout from this link: http://jsfiddle.net/oco0yypn/2/
<body>
<div class="container">
<div class="row">
<div class="col-sm-12" id="site_header">
<hr/>
<h1>CYBER<sup>FOSTERS</sup></h1>
<hr/>
</div>
</div>
<div class="row">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CF</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Program Implementation</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
Place it in an other row, with the same colomn amount. Something like this (have not tested it yet tho!). It should work.
<body>
<div class="container">
<div class="row">
<div class="col-sm-12" id="site_header">
<hr>
<h1>CYBER<sup>FOSTERS</sup></h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CF</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Program Implementation</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</body>
Related
I want my navbar brand to be in the middle and my nav links to be positioned on the left and right of my nav brand. Because when the screen reaches md I want the nav links to disappear and be in the burger but still have my nav brand showing at the top center.
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
<div class="container">
<div class="navbar-brand"><h2>Name</h2></div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#burger"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="burger">
<ul class="navbar-nav mx-auto">
<li class="nav-item px-5">
<h2>Python</h2>
</li>
<li class="nav-item px-5">
<h2>Html&Css</h2>
</li>
</ul>
</div>
</div>
</nav>
I am going for this look
What I want
HTML
<h1 class="text-center">Center Navbar Brand logo</h1>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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="http://disputebills.com"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvuVbC_1kQQsg8U63u6gWMWuA7W1Ck5t-zkw&usqp=CAU" alt="logo">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
CSS
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
/* DEMO example styles for logo image */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 7px 14px;
}
Screenshot
What I'm experiencing difficulty is that my navbar-right elements won't align with my navbar-brand part. I need help with this. I want to align them but the element would be like this
header.html
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-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="#">
{{ Html::image('assets/images/logo.png') }}
</a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="">About Us</li>
</ul>
</div>
</div>
</header>
style.css
.navbar-text > a {
color: inherit;
text-decoration: none;
}
body {
padding-top: 70px;
padding-bottom: 100px;
}
.navbar-default{
background-color:#005b96;
border-color:#005b96;
font-family: 'Roboto', sans-serif;
font-size: 15px;
position:absolute;
top: 25px;
left:100px;
right:100px;
}
.navbar-brand {
width: 100px;
height: 50px;
}
.navbar-default .navbar-brand > img {
width: 130px;
height:50px;
position: absolute;
top: 5px;
padding-top:5px;
padding-bottom: 5px;
margin-left: auto;
}
.row{
position:absolute;
top: 25px;
left:115px;
right:115px;
}
.panel{
margin-top:100px;
}
Example. The issue is actually with your markup. Your .container should also wrap
<div class="navbar-collapse collapse">
......
</div>
Like so:
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="#">
{{ Html::image('assets/images/logo.png') }}
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="">About Us</li>
</ul>
</div>
</div>
</div>
</header>
Is this your desired result? http://screencast.com/t/5drms5A0f
If yes, here is how I achieved that:
.navbar-collapse.collapse {
position: absolute;
right: 50px;
top: 26px;
}
Also, I would put that in min 768 px media query.
Thank you for reading and answering my question. What I would like to do is have my links underlined once it is hovered. Without background color and with space between text. Sort of something like this using bootstrap. enter image description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internship Exercise 1</title>
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body><!--Navbar start-->
<nav id="myNavbar" class="navbar navbar-default navbar-default navbar-static-top navpadding" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="#"><img src="img/logo.jpg" alt="logo" width="90%"></a>
</div>
<div class="collapse navbar-collapse navmargin" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
With CSS here that have a temporary underline for active. How can I do this for hover? Looking forward to your answer. Thanks!
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.underline {
border-bottom: solid 1px #ffffff;
display: inline;
padding-bottom: 2px;
}
Well that's why :hover exists :)
HTML:
<body><!--Navbar start-->
<nav id="myNavbar" class="navbar navbar-default navbar-default navbar-static-top navpadding" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="#"><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg" alt="logo" height="100%"></a>
</div>
<div class="collapse navbar-collapse navmargin" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
CSS:
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar{
background:pink!important;
padding:10px;
}
.navbar li *:hover{
color:red!important;
}
.navbar li:hover{
border-bottom:3px solid white;
}
Here is a working fiddle: https://jsfiddle.net/dp17vjus/
I'm using the bootstrap navbar-toggle button and when I click on it, the content stays hidden by the next div, I'm trying to fix it but I can't see the error.
You will see I have two div.row. The second div.row is hidding the div id="navbar1" content, that is the target of the navbar-toggle button.
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default" style="height:75px;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="zzlogo.png">
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Nosotros <span class="caret"></span>
<ul class="dropdown-menu">
<li>Desarrolladores</li>
<li>Trayectoria</li>
</ul>
</li>
<li class="dropdown">
Productos <span class="caret"></span>
<ul class="dropdown-menu">
<li>Abarrotes</li>
<li>Frutas y Verduras</li>
<li>Carnes</li>
<li>Lácteos</li>
</ul>
</li>
<li>Contacto</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- THIS DIV IS NOT MOVING WHEN I CLICK ON THE NAVBAR-TOGGLE BUTTON -->
<div class="row">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header col-xs-5 col-sm-4 col-md-3 col-lg-3">
Administración
</div>
<div class="col-xs-7 col-sm-8 col-md-9 col-lg-9">
<ul class="nav navbar-nav">
<li >Usuarios</li>
<li >Productos</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
Sorry for my bad english and thanks.
The problem is caused by declaring a height for the navbar (height: 75px). It's default is min-height: 50px so once the viewport is under 768px the navbar can't expand rendering the background as "invisible" if you will.
You can use padding to increase the height.
See working examples.
Example 1
.navbar.navbar-top {
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 0;
border-radius: 0;
}
.navbar.navbar-bottom {
border-radius: 0;
}
.navbar-top .navbar-brand {
padding-top: 0;
margin-top: -12px;
}
#media (max-width: 767px) {
.navbar-top .navbar-collapse {
margin-top: 20px;
margin-bottom: -20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"> <span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img src="http://placehold.it/150x75/f00">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Nosotros <span class="caret"></span>
<ul class="dropdown-menu">
<li>Desarrolladores
</li>
<li>Trayectoria
</li>
</ul>
</li>
<li class="dropdown"> Productos <span class="caret"></span>
<ul class="dropdown-menu">
<li>Abarrotes
</li>
<li>Frutas y Verduras
</li>
<li>Carnes
</li>
<li>Lácteos
</li>
</ul>
</li>
<li>Contacto
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2"> <span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> Administración
</div>
<div class="collapse navbar-collapse" id="navbar2">
<ul class="nav navbar-nav">
<li>Usuarios
</li>
<li>Productos
</li>
</ul>
</div>
</div>
</nav>
Example 2
.navbar.navbar-top {
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 0;
border-radius: 0;
}
.navbar.navbar-bottom {
border-radius: 0;
}
.navbar.navbar-bottom a {
margin: 0 5px;
}
.navbar-top .navbar-brand {
padding-top: 0;
margin-top: -12px;
}
#media (max-width: 767px) {
.navbar-top .navbar-collapse {
margin-top: 20px;
margin-bottom: -20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"> <span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img src="http://placehold.it/150x75/f00">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Nosotros <span class="caret"></span>
<ul class="dropdown-menu">
<li>Desarrolladores
</li>
<li>Trayectoria
</li>
</ul>
</li>
<li class="dropdown"> Productos <span class="caret"></span>
<ul class="dropdown-menu">
<li>Abarrotes
</li>
<li>Frutas y Verduras
</li>
<li>Carnes
</li>
<li>Lácteos
</li>
</ul>
</li>
<li>Contacto
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-bottom">
<div class="container">
<div class="navbar-header"> Administración
<p class="navbar-text"> Usuarios Productos
</p>
</div>
</div>
</nav>
I want a header with a height of 150px which contains a navbar. The navbar should be vertically centered in the header.
HTML:
<header>
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container" style="background:yellow;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-th-list"></span>
</a>
<img src="img/logo.png" class="logo" />
<nav class="nav-collapse collapse pull-right" style="line-height:150px; height:150px;">
<ul class="nav" style="display:inline-block;">
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
CSS:
header {
width: 100%;
line-height: 150px;
color:red;
height: 150px;
.navbar-inner {
border:0;
border-radius: 0;
background: blue;
padding:0;
margin:0;
height: inherit;
}
}
The nav/menu/vertical list is now in the top right of the header. How do I get it to center vertically? bootstrap.css is uncustomized.
your markup was a bit messed up. Here's the styles you need and proper html
CSS:
.navbar-brand,
.navbar-nav li a {
line-height: 150px;
height: 150px;
padding-top: 0;
}
HTML:
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#"><img src="img/logo.png" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
Or check out the fiddle at: http://jsfiddle.net/TP5V8/1/
You need also to set .min-height: 0px; please see bellow:
.navbar-inner {
min-height: 0px;
}
.navbar-brand,
.navbar-nav li a {
line-height: 150px;
height: 150px;
padding-top: 0;
}
If you set .min-height: 0px; then you can choose any height you want!
Good Luck!
For Bootstrap 4, there are now spacing utilities so it's easier to change the height via padding on the nav links. This can be responsively applied only at specific breakpoints (ie: py-md-3). For example, on larger (md) screens, this nav is 120px high, then shrinks to normal height for the mobile menu. No extra CSS is needed..
<nav class="navbar navbar-fixed-top navbar-inverse bg-primary navbar-toggleable-md py-md-3">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item py-md-3">Home</li>
<li class="nav-item py-md-3">Link</li>
<li class="nav-item py-md-3">Link</li>
<li class="nav-item py-md-3">More</li>
<li class="nav-item py-md-3">Options</li>
</ul>
</div>
</nav>
Bootstrap 4 Navbar Height Demo
I believe you are using Bootstrap 3. If so, please try this code, here is the bootply
<header>
<div class="navbar navbar-static-top navbar-default">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-th-list"></span>
</a>
</div>
<div class="container" style="background:yellow;">
<a href="/">
<img src="img/logo.png" class="logo img-responsive">
</a>
<nav class="navbar-collapse collapse pull-right" style="line-height:150px; height:150px;">
<ul class="nav navbar-nav" style="display:inline-block;">
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>