Navigation bar loses alignment in small screens - javascript

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

Cant see NAVBAR Hamburger ICON, but it works

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.

jQuery Function to bring in "offcanvas" slide-in menu is not working

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').

How to properly align a brand image in bootstrap

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.

How do you make it so the navbar is transparent then changes color using bootstrap 3. (Affix)

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;
}

bootstrap navbar toggle button is not visible in mobile

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;}

Categories

Resources