I would like to have a button in the navbar that is:
inline with the rest of the navbar items (i.e. it doesn't get pushed to the next line);
located outside of the collapsed navbar section; and
always positioned in the center of the page for all screen resolutions (including when the right-side of the navbar is collapsed).
I am having particular problems with:
centering the button; and
some of the navbar items not working for smaller screen resolutions (when navbar is collapsed).
Below is my code.
Alternative CSS that I tried:
.navbar-button {
position: absolute;
left: 0;
width: 100%;
text-align: center;
white-space: nowrap;
}
but this caused some of the other navbar links to not work. I subsequently tried to make use of z-index, but it didn't seem to work.
body {
padding-top: 50px;
padding-bottom: 20px;
}
.section {
margin-bottom: 30cm;
}
.navbar-button {
display: inline-block;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#brand">Brand</a>
<div class="navbar-button">
<button type="button" class="btn btn-primary navbar-btn">Button</button>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="text-center">
Link-1
</li>
<li class="text-center">
Link-2
</li>
<li class="text-center">
Link-3
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="section" id="brand">
<h3>Top</h3>
</div>
</div>
<div class="row">
<div class="section" id="link1">
<h3>Section-1</h3>
</div>
</div>
<div class="row">
<div class="section" id="link2">
<h3>Section-2</h3>
</div>
</div>
<div class="row">
<div class="section" id="link3">
<h3>Section-3</h3>
</div>
</div>
</div>
</body>
</html>
You can use position : absolute but don't apply 100% width as it's mostly likely covering your links/toggle button. You can also apply the .navbar-btn directly to the button inside of an outer div.
Example CSS:
.button-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Working Example:
body {
padding-top: 50px;
padding-bottom: 20px;
}
.section {
margin-bottom: 30cm;
}
.button-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="https://www.github.com" target="_blank">Brand</a>
<button type="button" class="btn btn-primary navbar-btn button-center">Button</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="text-center">
Test Link
</li>
<li class="text-center">
Link-2
</li>
<li class="text-center">
Link-3
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="section" id="brand">
<h3>Top</h3>
</div>
</div>
<div class="row">
<div class="section" id="link1">
<h3>Section-1</h3>
</div>
</div>
<div class="row">
<div class="section" id="link2">
<h3>Section-2</h3>
</div>
</div>
<div class="row">
<div class="section" id="link3">
<h3>Section-3</h3>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Related
I already have a side menù, I want him to change into a hamburger menù whenever the website is open by a mobile device. I also use bootstrap libraries, I dunno if it can help, it would be better using them. Here's an example of what I have:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
div {
border: solid black 1px;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
width: 100%;
}
.menu {
text-align: center;
}
button {
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3">
<div class="menu">
<button>Content 1</button><br>
<button>Content 2</button><br>
<button>Content 3</button><br>
<button>Content 4</button><br>
<button>Content 5</button><br>
<button>Content 6</button><br>
<button>Content 7</button><br>
<button>Content 8</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
Since you're using Bootstrap, it's easier to do it with Bootstrap like this:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="yourlogo.com" class="d-inline-block align-top" width="32" height="32" alt="Your logo" />web.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-bar-content" aria-controls="navigation-bar-content" aria-expanded="false" aria-label="Expand navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation-bar-content">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
<li class="nav-item">
<a class="nav-link disabled" href="#">Products</a>
</li>
</ul>
<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">Submit</button>
</form>
</div>
</nav>
When used on a phone, the navigation menu folds into a hamburger. You can verify this, for example, using the developer tools (CTRL + SHIFT + I in Chrome).
Of course, you need to have some sort of search function for that search field or it won't work for you. You can also add a dropdown there, but you must also have JavaScript linked.
I used toggle navbar as menu in my website for all devices. When I use this code it does not showing the 3 icon for collapsible nav bar. Please anyone find the errors in my code
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="srch">
<form method="post" class="col-md-7">
<input type="text" name="search" placeholder=" SEARCH" id="srch">
</form>
</div>
</div>
<div class="col-md-4">
<img src="image/logo.jpg" width="250" height="74">
</div>
<div class="col-md-4">
<button type="button" class="navbar-toggle x collapsed line" data-toggle="collapse" data-target="#navbar-collapse-x">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
You may try this bellow example according your requirement
.navbar-toggle {
border: none;
background: transparent !important;
&:hover {
background: transparent !important;
}
.icon-bar {
width: 22px;
transition: all 0.2s;
}
.top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.middle-bar {
opacity: 0;
}
.bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
&.collapsed {
.top-bar {
transform: rotate(0);
}
.middle-bar {
opacity: 1;
}
.bottom-bar {
transform: rotate(0);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
<!-- Static navbar -->
<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" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div> <!-- /container -->
for collapsible nav bar use this instead :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<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>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
change the screen size to see the effect.
https://jsfiddle.net/43rm9emw/
This question already has answers here:
Bootstrap 3 - disable navbar collapse
(6 answers)
Closed 5 years ago.
My Bootstrap nav has only two elements. How do I disable the collapsing feature for Bootstrap when you minimize the page? The Login button can easily fit even when I minimize the page.
/* Navigation */
.navbar-brand img {
width:30%;
height:100%;
}
.navbar-default {
padding-top:10px;
padding-bottom:10px;
}
.navbar {
background: #23272D !important;
}
#logo {
width: 83.33px;
height: 27.68px;
}
#login_button {
position: relative !important;
top: 7px !important;
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<div class="navbar-brand">
<a href='#'> <img src='http://logos-download.com/wp-content/uploads/2016/06/Udemy_logo.png' class='img-responsive' id='logo'> </a>
</div>
</div>
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<button type="button" class="btn btn-danger" id='login_button'>Login</button>
</div>
</nav>
<!-- End of Navigation -->
Update Navigation part with below code
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-brand">
<img src="http://logos-download.com/wp-content/uploads/2016/06/Udemy_logo.png" class="img-responsive" id="logo">
</div>
<div class="pull-right">
<button type="button" class="btn btn-danger" id="login_button">Login</button>
</div>
</div>
</nav>
try this.
I'm trying to create a boostrap navbar with a small square logo on the left, text (company name) to the right, and then navbar on far right. Here's code so far, I just can't figure out how to add the text.
When it goes down to XS, I need the logo and text to remain on the same line. So, I made the logo image a full width transparent PNG (to hold the column in place) and tried to add text to the right of the logo (still over the transparent part) but I can't figure this out.
Any help would be great. Here's code so far:
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-5">
<div class="logo"><div style="height:50px; width:150px; position:absolute; border:solid 1px red;"></div><a href="<?php echo site_url(); ?>/"><img src="<?php echo get_template_directory_uri(); ?>/images/logo_small.png"
class="img-responsive"></a></div>
</div>
<div class="col-md-7 col-sm-7 hidden-xs">
<!-- Navbar Start Here -->
<div role="navigation" class="navba-r navbar-default">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<nav role="navigation" class="collapse navbar-collapse navbar-left">
<ul class="navbar-nav nav aa">
<li>COMPANY</li>
<li>PEOPLE</li>
<li>PATIENTS</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<!-- Navbar End Here -->
</div>
</div>
</div>
</div>
I put together a fiddle for you. I included the logo and title inside the nav. The key was adding the class pull-left to the href around the image.
https://jsfiddle.net/msm6jozL/7/
<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" aria-expanded="false" aria-controls="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="logo pull-left" href="#"><img src="https://placehold.it/150x30"></a>
<span class="name pull-left">COMPANY NAME</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>COMPANY</li>
<li>PEOPLE</li>
<li>PATIENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</div>
.logo {
padding: 10px 10px 0 10px;
}
.name {
font-size: 14px;
color: #333;
padding-top: 15px;
}
I'm attempting to preserve the position of two menu element (Home icon and Foo) that render as desired on large devices:
But are displayed as rows on a mobile device (obscuring content):
Is there a way to force these two menu items to display to the right of the Brand menu and on the same 'row'?
Sample: http://www.bootply.com/Fjq7ZXSDXc#
You can create a separate div inside the navbar-header: See example Snippet.
.navbar-header .nav-icons {
padding-top: 12px;
position: absolute;
display: inline-block;
top: 0;
}
.navbar-header .nav-icons span {
padding-left: 5px;
padding-right: 5px;
font-size: 20px
}
.navbar-header .nav-icons a {
color: #fff;
text-decoration: none;
}
<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-inverse navbar-static-top custom-navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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" rel="home" href="#" title="Help"> Brand</a>
<div class="nav-icons">
<a href="#"> <span class="glyphicon glyphicon-home"></span>
</a>
<a href="#"> <span> Foo</span>
</a>
</div>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-1">
<!-- Non-collapsing right-side icons -->
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<!-- /.container -->
Try to add this in your .css
.nav-collapse .nav > li {
display: inline-block;
}