I've implemented twitter bootstrap on my site.I want to know how to make nav-bar responsive like one on twitter bootstrap official site.
There is problem with alignment in small size screens take a look at pic below.
HTML CODE:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-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="index.php">Studyfoyer</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Learn</li>
<li>Teach</li>
<li>Discuss</li>
<li class="dropdown">
Connect<b class="caret"></b>
<ul class="dropdown-menu">
<li>Contact Us</li>
<li class="divider"></li>
<li>Blog</li>
<li>About</li>
<li>Contribute</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CUSTOM CSS:
.nav{
float:right;
}
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
padding-left: 0;
padding-right: 0;
}
.navbar-wrapper .navbar {
padding-left: 15px;
padding-right: 15px;
}
FYI to play with sizesmy_Site
#media queries are what you are looking for. You can find many examples, one is here
Related
When I make the window smaller, I can still click on where the hamburger icon should be, and the dropdown drops and it works, but there is NO icon for the hamburger (aka the 3 little lines) any help would be awsome!
<nav class="navbar navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">GroupWrites</a>
</div>
<!--Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Explore</li>
<li>Publish</li>
<li>Library</li>
<li>How It Works</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<% if(!currentUser){ %>
<li>Create Account <i class="fa fa-user-plus"></i></li>
<li>Log In <i class="fa fa-user-circle"></i></li>
<% } else { %>
<li>Signed In As <%= currentUser.username %></li>
<li>Log Out <i></i></li>
<% } %>
</ul>
</div>
</div>
</nav>
CSS
body { font-family: comfortaa; padding-top: 90px; line-height: 1.75 }
.navbar{ background-color: #3c3d41; color: white; padding: 5px; }
.navbar li a:hover,
.navbar li a:active { border-bottom: 2px solid white; background-color: #3c3d41; color: white ; }
.navbar-brand:hover,
.navbar-brand:active { border-bottom: 2px solid white; background-color: #3c3d41; color: white ; }
a { color: white; }
#button { background: rgb(100,149,237); color: white; }
That is my navbar code. It is in my header and everything works perfectly, I just cannot actually see the hamburger icon itself. Any help would be amazing. Please and thank you. Seems like something very easy that I quite cant put my finger on.
So I got it to work , by changing the class from "navbar navbar-fixed-top" to "navbar-inverse navbar-fixed-top" still not sure why this is though. With navbar-inverse my hamburger icon-bars display. So I just customized .navbar-inverse to my same colors and css as I wanted.
I have tried and searched the internet dry without any solution to my problem. I have created an list in which I modified to be located off the main screen as a slide-in menu using transform: translate (-100%). When the main navbar collapses into the mobile button, I intend to assign a jQuery function to the button in order to slide-in the offcanvas menu. However, the button does not respond no matter what and I need some aid. Any help is greatly appreciated!
/..The main navbar../
<nav class="main-navigation" role="navigation">
<ul>
<li class="products1">Products</li>
<li class="store1">Store</li>
<li class="about1">About Us</li>
<li class="discover1">Discover</li>
<li class="support1">Support</li>
</ul>
</nav>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
/..The button that dosen't work../
<button class="navbar-toggle pro-toggle pull-left">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
/..The menu that I want to slide in but dosen't work../
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="products">Products</li>
<li class="store">Store</li>
<li class="about">About Us</li>
<li class="discover">Discover</li>
<li class="support">Support</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
/..The main CSS for the slide-in menu../
<style>
.main-navigation {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: fixed;
text-align: center;
text-decoration: none;
background-color: white;
transform: translateX(-100%);
transition: transform 1s ease;
}
.main-navigation.open {
transform: translateX(0);
}
</style>
/..The jQuery function that is supposed to slide-in the menu../
<script>
$(document).ready(function() {
$('.pro-toggle').on('click', function(){
${'.main-navigation').toggleClass('open');
});
});
</script>
change
from ${'.main-navigation') to $('.main-navigation').
It is not a duplicate of this. That question is about replacing the text logo with image. This question is about placing an image in addition to the text logo.
I have the following bootstrap code that attempts to show the site logo followed by its name. I am using the bootstrap class navbar-brand to do so:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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="./EnterpriseCopy_files/EnterpriseCopy.html">
<img src="./EnterpriseCopy_files/android-icon-48x48.png">
</a>
<a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">Enterprise Copy</a>
</div>
<div class="navbar-collapse collapse">
The logo ends up looking like this:
I then have to add style="margin-top:-13px" to the img tag in order to push up the image and make it look good:
This can't be the right way to do this. Is there a better way of doing this?
The original code here, one with the style tweak here.
The problem is with .navbar-brand having padding:
padding: 15px 15px;
It is in bootstrap's default style. So remove that and give:
.navbar-brand {padding: 0;}
You are all set. See the screenshot, where I gave padding: 0; to see it work:
If want to add both an image and text inside the navbar-brand class instead of separating them, apply display: inline-block to your img and then adjust the padding for navbar-brand itself to accommodate everything.
.navbar .navbar-brand {
padding: 2px 15px;
}
.navbar .navbar-brand img {
display: inline-block;
}
See working Snippet.
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
/* Carousel */
.carousel-caption {
z-index: 10 !important;
}
.carousel-caption p {
font-size: 20px;
line-height: 1.4;
}
#media (min-width: 768px) {
.carousel-caption {
z-index: 10 !important;
}
}
/**ADDED CSS**/
.navbar .navbar-brand {
padding: 2px 7.5px;
}
.navbar .navbar-brand img {
display: inline-block;
}
/**ADDED CSS**/
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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="./EnterpriseCopy_files/EnterpriseCopy.html">
<img src="http://vbrad.com/misc/EnterpriseCopy_files/android-icon-48x48.png">Enterprise Copy
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Mailbox
</li>
<li>Copy Groups
</li>
<li>Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>bar#foo.com
</li>
<li>Sign Out
</li>
</ul>
</div>
</div>
</div>
For me, setting class d-inline-block and align-middle on both anchor elements worked. I'm using bootstrap 4.3.1.
Ive been trying to find out how to do this for a week and have been unable to do it. My html navbar looks like this.
<div class="maincontainer">
<!--Navbar-->
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
<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="#">Pixoweb</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li class="dropdown">
Examples<b class="caret"></b>
<ul class="dropdown-menu">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Js
$('#myAffix').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
})
css
.affix {
position: fixed !important;
top: 0 !important;
width: 100% !important;
background-color: #957595 !important;
}
So far this has made it so that the navbar goes behind the the context and images. I would like it if someone can help me
Navbar has not gone behind the text/images, it has been 3d transformed by bootstrap affix so that it looks like it has gone behind. I assume that you want to change the background color of the navbar when it is pinned (affixed). You can use following CSS. Note: you don't need JavaScript.
.affix .navbar-default {
position: fixed !important;
top: 0 !important;
width: 100% !important;
background-color: #957595 !important;
}
.affix {
width: 100% !important;
}
I also struggled with my menu displaying behind my images, I fixed it by adding "z-index: 1;" to my nav class. eg:.navbar-inverse in the style sheet
.navbar-default {
background-color: #201f1f;
border-color: #f47d20;
border-bottom:#f47d20 5px solid;
padding-bottom:0px;
z-index: 1;
}
I am using twitter Bootstrap for my website and it has a fixed navbar on top. When I am resizing window in my desktop browser, everything is fine. When I am opening the same site on mobile, I can see navbar-brand but not the toggle button. I'm posting screenshots for a better understanding (first one is desktop firefox and second one is android):
This is driving me crazy!!!
The Code:
.navbar-floating {
background: black;
color: #5b5656;
width: 100%;
border-radius: 0;
}
.navbar-floating .navbar-brand {
color: #810000;
font-size: 20px;
text-transform: uppercase;
}
.navbar-floating .navbar-brand:after {
content: ' | ';
color: #810000;
position: relative;
top: -3px;
}
#floating-nav {
position: fixed;
/* display: none; */
top: 0;
width: 100%;
height: 50px;
}
#floating-nav.navbar {
min-height: 1px;
}
#floating-nav ul li a {
font-size: 20px;
}
#floating-nav ul li a:hover {
background: none;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css">
<nav class="navbar navbar-floating navbar-default" role="navigation" id="floating-nav" >
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#hidden-nav">
<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 scroll-top" href="#">DSA Media Group</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="hidden-nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Agency</li>
<li>Capabilities</li>
<li>Projects</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.js"></script>
What am I doing wrong? Any help is much appreciated.
Just add a navbar-default class to the div wrapping your <ul> element like this:
<div class="collapse navbar-collapse navbar-default" id="hidden-nav">
<ul class="nav navbar-nav">
....
</ul>
</div>
Try using .navbar-dark as
<nav class="navbar navbar-dark navbar-floating navbar-default" role="navigation" id="floating-nav" >
<div class="container">
.........
</div>
</nav>
For me, the solution is really annoying
change navbar-expand-sm to navbar-expand-lg in side <nav class=
It's inside of your bootstrap css. It's defined by default to hidde on md. all you gotta do is creat a new line in your style page..navbar-expand-md .navbar-toggler{display: block !important;}