Having an issue with bootstrap3 responsive navbar and a logo - it displays fine on a desktop and works fine. When on a mobile and collapsed, I can click the button, but the menu doesn't show up - just a horizontal scroll bar. I am stuck. Here is my HTML code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap links -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="navbar-left" href="#">
<img src="" alt="logo" id="sitelogo" />
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>What We Do</li>
<li>Case Studies</li>
</ul>
</div>
</div>
</nav>
</div>
Add height: auto!important; to #navbar and remove position: absolute; from #navbar .nav and that should fix the problem.
have you tried removing
aria-expanded="false" aria-controls="navbar"
Related
I'm using Visual studio and ASP.net to build a web page.
My code:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
</head>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img alt="" src="~/resources/favicon.ico"></a><a class="navbar-brand" href="/">ASTRO</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Pictures</li>
<li>Tonight's Sky</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Bootstrap link I'm using:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
I've tried the latest bootstrap version 5.1.3 with no luck.
As I said in the header, Works fine in the mobile Firefox but all I get mobile Chrome browser is the Navbar and the "ASTRO" link which works the other links in the list don't show. And when I click on the 3 bars button nothing happens.
Does Chrome need some special settings?
Thanks
Nor
You needed to include jQuery and Bootstrap .js files since the button uses JavaScript:
Updated code:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img alt="" src="~/resources/favicon.ico"></a><a class="navbar-brand" href="/">ASTRO</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Pictures</li>
<li>Tonight's Sky</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
I want to have my site responsive to different screen sizes. At the moment I am testing my site at a width of 765px (and lower). What I would like to happen is for the menu to appear when I click the three bars, but nothing happens. No menu appears, just the 'brand name'.
I am using the bootstrap navigation for my menu.
This is a screenshot of the page (edited):
The Jquery code: - external file
#media screen and (min-width: 280px) and (max-width: 765px){
/* code goes here */
.primary {
color: orange !important;
font-size: 14px;
}
}
The color change is for testing sizes.
The HTML: - navigation only
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle" 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>
<div class="navbar-header">
<a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Privacy</li>
<li>Terms</li>
<li>Copyright</li>
</ul>
</div><!-- navbar collapse -->
</div>
</nav>
What have I missed?
How I can I solve my issue?
Any help would be appreciated.
Thanks
One of the reasons would be messing up the order of jQuery and bootstrap.js. Bootstrap requires jQuery in order to run some events. So make sure your jquery script is before bootstrap.min.js or bootstrap.js.
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle" 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>
<div class="navbar-header">
<a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Privacy</li>
<li>Terms</li>
<li>Copyright</li>
</ul>
</div><!-- navbar collapse -->
</div>
</nav>
I made simple bootstrap navbar which collapses when display window is small. I also added image in that navabar.
Now when I make browser window smaller and hamburger menu appears, I have collapsible menu not aligned to the very left of the webpage, please see the enclosed image below.
I would like to have that collapsible menu aligned to the left, what should I do?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-left logo">
<img src="img/logo.png" height="40px">
</a>
<a class="navbar-brand text-hide" href="index.html">title</a>
</div>
<div class="collapse navbar-collapse navbar-left" id="menu">
<ul class="nav navbar-nav">
<li class="active">
Bio
</li>
<li>
Portfolio
</li>
<li>
Freebies
</li>
</ul>
</div>
</div>
</nav>
<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.7/js/bootstrap.min.js"></script>
Thanks in advance
Screenshot of my collapsed navabar issue
Use a media query with your CSS so it doesn't change the mobile view.
Working Example:
#media (min-width: 768px) {
.nav {
margin-left: 212px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-left logo">
<img src="http://placehold.it/50x50/f00/fff" height="50px">
</a>
<a class="navbar-brand text-hide" href="#">title</a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li class="active">Bio
</li>
<li>Portfolio
</li>
<li>Freebies
</li>
</ul>
</div>
</div>
</nav>
<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.7/js/bootstrap.min.js"></script>
Do the following changes
1)move button tag after image of a
2)Add style attribute like following in img and button tag
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="navbar-left logo">
<img src="img/logo.png" height="40px" style="float:left;">
</a>
<button type="button" style="float:left;" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<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 text-hide" href="index.html">title</a>
</div>
<div class="collapse navbar-collapse navbar-left" id="menu">
<ul class="nav navbar-nav">
<li class="active">
Bio
</li>
<li>
Portfolio
</li>
<li>
Freebies
</li>
</ul>
</div>
</div>
</nav>
<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.7/js/bootstrap.min.js"></script>
I want to align the button links and the "Donate" button, i.e. make them begin at the same position. I've tried using the grid system, but the result was not satisfactory.
Here is the fiddle.
<head>
<title>
Test
</title>
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="header">
<nav class="navbar navbar-default navbar-static-top">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="margin: 0">
<li>Log In
</li>
<li>
<p class="navbar-btn">
Donate
</p>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</body>
If by "make them begin at the same position" you mean make both buttons left aligned, then all you have to do is simply apply text-align: left to the button (.navbar-btn .btn-danger).
.navbar-btn .btn-danger {
text-align: left;
}
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<nav class="navbar navbar-default navbar-static-top">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="margin: 0">
<li>Log In
</li>
<li>
<p class="navbar-btn">
Donate
</p>
</li>
</ul>
</div>
</div>
</nav>
</div>
https://jsfiddle.net/azizn/mou33Lkz/
I don't know what exactly you are trying to ask here. I mean do you want "donate" to align with the link text. If that's what you want you can apply this css-
.navbar-btn a{
text-align:left;
}
.navbar-nav li>a:first-child{
padding-left:0px;//you can adjust this accordingly
}
I just started this project but I just can't get the navbar right. Read every same question on stack but I can't figure it out. Tried the jquery everywhere and screened my code now about a 100 times.
<title>Dit is Bas</title>
<meta name "viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link type="css/bootstrap.min" rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="javascript/bootstrap.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="collapse 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.html">Bas</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Photo's</li>
<li>About Bas</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
Hopefully somebody will see the problem.
Thanks in advance!
The problem lies in data-target="collapse navbar-collapse" which should be id of div that has items of menu. For transitions to work in Bootstrap you need jquery.js before bootstrap.js.
You should have something like this to have working navbar.
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#important-id-for-collapsing" 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>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="important-id-for-collapsing">
<ul class="nav navbar-nav">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</div>
</nav>
Here's a link to JSFiddle.