I have a slightly different form of navigation. The structure is like so
<nav class="navbar navbar-fixed-left vertical-center" role="navigation">
<ul class="nav navbar-nav">
<li><a class="page-scroll" href="#hero"><span>H</span><span>O</span><span>M</span><span>E</span></a></li>
<li><a class="page-scroll" href="#portfolio"><span>W</span><span>O</span><span>R</span><span>K</span></a></li>
<li><a class="page-scroll" href="#about"><span>A</span><span>B</span><span>O</span><span>U</span><span>T</span></a></li>
<li><a class="page-scroll" href="#contact"><span>C</span><span>O</span><span>N</span><span>T</span><span>A</span><span>C</span><span>T</span></a></li>
</ul>
</nav>
And with the CSS I display the menu vertically down the side of the page. I have set up a JSFiddle to demonstrate.
My question relates to how I can get this to switch to the standard bootstrap mobile menu on mobile devices?
Thanks
Something like this?
Pnkr
<nav id="mainNav" class="navbar navbar-fixed-left vertical-center">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navCollapsed">
<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 class="collapse navbar-collapse" id="navCollapsed">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#hero"><span>H</span><span>O</span><span>M</span><span>E</span></a></li>
<li><a class="page-scroll" href="#portfolio"><span>W</span><span>O</span><span>R</span><span>K</span></a></li>
<li><a class="page-scroll" href="#about"><span>A</span><span>B</span><span>O</span><span>U</span><span>T</span></a></li>
<li><a class="page-scroll" href="#contact"><span>C</span><span>O</span><span>N</span><span>T</span><span>A</span><span>C</span><span>T</span></a></li>
</ul>
</div>
</div>
</nav>
Added a button for when the menu is collapsed, which will show up when the navbar breakpoint is reached. The list items are then added under this button.
I use media queries to switch up the style and removing the vertical alignment of the navbar.
Related
I would like to show both the logo and the button on my page in mobile version. I currently using bootstrap navbar:
<div class="navbar-header">
<a class="navbar-brand" href="#first" >
<img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;">
</a>
</div>
<div class="navbar-collapse collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>
<a class="page-scroll" class="active" href="#first">Home</a>
</li>
<li>
<a class="page-scroll" href="#one">About</a>
</li>
</ul>
</div>
With the following code only the logo inside the navbar-header is shown on mobile not the buttons, Home, About etc. I have no problems on desktop.
First: Base on your html you don't have
<nav class="navbar navbar-default">
</nav>
It should be
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#first">
<img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;">
</a>
<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>
</div>
<div class="navbar-collapse collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>
<a class="page-scroll" class="active" href="#first">Home</a>
</li>
<li>
<a class="page-scroll" href="#one">About</a>
</li>
</ul>
</div>
</nav>
Second: Bootstrap hides the navbar-collapse in mobile but you can toggle it using a button..
A fiddle without the button..
A fiddle with the button..
Try to remove the classes navbar-collapse collapse and the id bs-navbar. These classes are related to the bootstraps library and it makes the menu colapse when the viewport detects a given width of the screen (mobile devices). By removing these classes, the buttons will always be displayed, even in mobile devices.
I'm using bootstrap, and it is a one page site. However, I used an external link at the nav menu. And I don't understand why is not working.
if you try to go by the url stright it works
http://www.neevasoft.com/docasnovo/acervo.html
But when I'm at the index.html, it doesn't work.
you can chaeck it at:
http://www.neevasoft.com/docasnovo
HTML
<div class="body-inner">
<!-- Header start -->
<header id="header" class="navbar-fixed-top main-nav" role="banner">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Logo start -->
<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="#home">
<img class="img-responsive" src="images\logo.png" alt="logo">
</a>
</div><!--/ Logo end -->
<nav class="collapse navbar-collapse clearfix" >
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#home">Home</a></li>
<li><a class="page-scroll" href="#services">A Empresa</a></li>
<li><a class="page-scroll" href="#historia">História</a></li>
<li><a class="page-scroll" href="#about">Participações</a></li>
<li><a class="page-scroll" href="#team">Renovada</a></li>
<li><a class="page-scroll" href="#contact">Contato</a></li>
<li><a class="page-scroll" href="acervo.html">Acervo</a></li>
<!--li><a class="page-scroll" href="#contact">Contact</a></li-->
</ul>
</nav><!--/ Navigation end -->
</div><!--/ Col end -->
</div><!--/ Row end -->
</div><!--/ Container end -->
</header><!--/ Header end -->
It's probably your Javascript code is blocking the execution of normal href attribute. You can do it something like this:
<li><a class="page-scroll" href="acervo.html" onClick="window.location='acervo.html'">Acervo</a></li>
Inline onClick tag prevails over the Javascript click functions you have set in your document.
For some reason I cannot get the navbar to change. I tried to make it transparent. I know bootstrap navbar is normally an image so I included background-image: none.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand page-scroll" href="#intro">Eric West</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#projects">Projects</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
navbar {
background-color: transparent;
background: transparent;
background-image: none;
}
Don't remove .navbar-inverse (or .navbar-default) unless you plan on adding some custom CSS to make up for it because these add properties to the nav, in particular to the navbar-toggle class.
Without one of those you'll remove alot of CSS from your nav and the navbar-toggle will not be visible on a device under 768px, it will be there and actionable but you won't be able to see it.
I would add a custom nav class and use that to override the property you need to change.
See example with that includes one with and one without the additional property.
body,
html {
background: grey;
margin-top: 50px;
}
.navbar.navbar-custom {
background-color: transparent;
}
<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-custom navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 page-scroll" href="#intro">Custom Navbar</a>
</div>
<div class="collapse navbar-collapse navbar-1">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a class="page-scroll" href="#projects">Projects</a>
</li>
<li> <a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-2"> <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 page-scroll" href="#intro">Navbar Only</a>
</div>
<div class="collapse navbar-collapse navbar-2">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a class="page-scroll" href="#projects">Projects</a>
</li>
<li> <a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Not sure if it is a typo on your end, but you need to add a . to target the navbar class in css like so:
.navbar {
background-color: transparent;
background: transparent;
background-image: none;
}
As mentioned by #Benya16, the navbar-inverse class modifies the base attributes of the navbar, you can read about that in the docs here. If you remove that bootstrap attribute it will be the bootstrap default.
Bootstraps Navbar is defined by its CSS file. To change the color, simply do.navbar-default:background-color: transparent !important although !important is not best practise, you can always change the color in the Bootstrap.css file.
Bootstrap.css - line 4594 to find the .navbar-inverse background color.
do ctrl-f and type navbar-defualt to find that one too.
I'm trying to make a navbar using bootstrap to my own needs, but have stumbled upon a problem.
I want the first two links from the left (home and menu glyphicons) to not collapse when window is sized down. The rest would collapse.
Screenshot link
enter link description here
Here is my code
<template name="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li><a class="navbar-nav" href="{{pathFor 'home'}}"><span class="glyphicon glyphicon-home"></span></a></li>
<li><a class="navbar-nav" id="showMenu" href="#"><span class="glyphicon glyphicon-align-left"></span></a></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navigation">
<ul class="nav navbar-nav">
<li class="{{activeRouteClass 'home' 'newPosts'}}">
New
</li>
<li class="{{activeRouteClass 'bestPosts'}}">
Best
</li>
{{#if currentUser}}
<li class="{{activeRouteClass 'postSubmit'}}">
Submit Post
</li>
<li class="dropdown">
{{> notifications}}
</li>
{{/if}}
</ul>
<ul class="nav navbar-nav navbar-right">
{{> loginButtons}}
</ul>
</div>
</div>
</nav>
</template>
Move them into a separate <ul> object without the nav navbar-nav classes in order to disable this behaviour.
I have an issue where the Bootstrap 3 navbar when it is converted into a dropdown menu on small devices (see code below). The issue is that once a menu link has been selected, the navbar dropdown doesn't close.
Any pointers where to start looking greatly appreciated.
<nav id="y-navbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<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="#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 class="y-logo" src="images/template-logo.png" alt="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a class="y-nav-link" data-partial="home.html" href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a id="y-nav-about" class="y-nav-link" data-partial="about.html" href="#">About</a></li>
<li><a class="y-nav-link" data-partial="contact-us.html" href="#">Contact</a></li>
<li><a class="y-nav-link" data-partial="map.html" href="#">Directions</a></li>
<!-- Page Layouts -->
<li class="dropdown">
Layouts <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a class="y-nav-link" data-partial="feature-boxes.html" href="#"><i class="fa fa-file-code-o"></i> Feature Boxes</a></li>
<li><a class="y-nav-link" data-partial="four-blocks.html" href="#"><i class="fa fa-file-code-o"></i> Four Blocks</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
You can add in a script to let the menu close after click:
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});
See it working here: jsFiddle
Reference here