I'm trying to setup navigation but I can't get it to work the way I wanted.
How i can customize my navigation wp-bootstrap-navwalkercustomize
my current static code.
<div class="nav-outer clearfix d-flex align-items-center">
<!-- Main Menu -->
<nav class="main-menu navbar-expand-lg">
<div class="navbar-header">
<div class="mobile-logo py-15">
<a href="index.html">
<img src="assets/images/logos/logo.png" alt="Logo" title="Logo">
</a>
</div>
<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 clearfix">
<ul class="navigation clearfix">
<li class="current dropdown">Home
<ul>
<li class="dropdown">MultiPage
<ul>
<li>Page</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
<!-- Main Menu End-->>```
Related
I am creating a angular 2 application using bootstrap. I want to have a navbar on my application so that app menu looks like
When viewed from smaller devices it should look as follows :
I have used following code in my html
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">COMPANY LOGO</a>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul *ngFor="let menu of menus;let first = first;" class="nav navbar-nav">
<li>
<a (click)="menuClicked(menu.categoryId)"
href='#/{{menu.categoryName}}'
style="color: #fff;font-size: 16px;font-weight:bold;cursor:pointer;">
{{menu.categoryName}}
</a>
</li>
</ul>
</div>
</div>
</nav>
Which gives me following output :
Can someone guide how to achieve desired output?
#Mandar Patil, I've linked to a codeply project that should meet your requirements.
For the brand on the collapsed navigation menu, you can just use bootstraps visible and hidden utility classes, and specify the appropriate breakpoints.
HTML
<div class="container hidden-xs visible-sm visible-md visible-lg">
<div class="row">
<div class="col-12">
<a class="navbar-brand" href="#">COMPANY LOGO</a>
</div>
</div>
</div>
...
<div class="navbar-header" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#" style="color: white;">COMPANY LOGO</a>
</div>
You can try For this:
<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>
<div class="col-md-12 clearfix">
<div class="row">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</div>
<div class="col-md-12 clearfix">
<div class="row">
<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>
</div>
</div>
I am trying to put a div above navbar-fixed-top in bootstrap, but for some reason the div with its content does not show. I dont know what else to write here, it is asking for detail all is in a code
here is the code
<div class="nav-top">
<div class="container">
<div class="row">
<div class="col-xs-12">fdjfdl;ffd;fjd; fjd;ffffffffffffffffffff
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default 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>
</button>
<div class="navbar-brand" ><img src="images/logoa.png" alt="need to name it"></div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Главная <span class="sr-only">(current)</span></li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>blabla</li>
<li>blablabla</li>
<li class="j">
Обо мне <span class="caret"></span>
<ul class="dropdown-menu">
<li>blu</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
remove your navbar-fixed-top class from code then you get some space to show your text.Have fun
Here is JSFiddle:https://jsfiddle.net/arifkarim/uu0n4cyk/3/
I know this is 4 years late but for anyone else stumbling upon this.
The fixed-top has a z-index of 1030, so just set your own element that you wish to be on top to z-index: 1050 (higher than 1030 at least).
So, want put a navbar-fixed-top in my nav. The proposal is that my nav follow when scrolling page. But the difficulty is that my nav is overlapping the section right below in this case, my carousel slide.
here de jsfiddle
https://jsfiddle.net/fhvo7anz/
<header class="container-fluid">
<div class="container bghead navbar-fixed-top ">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="images/logo.png"><br>
</div>
<div class="col-md-8">
<nav class="navbar navbar-default bgnav">
<div class="container-fluid">
<!-- 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>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home<span class="sr-only"></span></li>
<li class="dropdown">
Institucional <span class="caret"></span>
<ul class="dropdown-menu">
<li>Institucional</li>
<li>Missão, Visão e Valores</li>
<li>Organograma</li>
<!--<li role="separator" class="divider"></li>-->
</ul>
</li>
<li>Atividades</li>
<li>Link</li>
<li>Contato</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Procurar">
</div>
<button type="submit" class="btn btn-default">Ir</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
</div>
</header>
Add this to your CSS:
#carousel-example-generic {
margin-top:150px;
}
I am trying to implement twitter bootstrap collapsible navigation bar. On Desktop navigation bar is visible but on mobile screen it's not visible.
Here is View Part
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><img src="/x/img/X.png" style="width:80px; position:relative; top:-20px;"></img></h3>
<div class="container">
<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="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-top:15px;background-color:rgba(255,255,255,.4)">
<li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a></li>
<li ><a th:href="#{/X}" href="#">X</a></li>
<li><a th:href="#{/Y}" href="#">Y</a></li>
<li><a th:href="#{/Z}" href="#">Z</a></li>
<li><a th:href="#{/T}" href="#">C</a></li>
<li class="active"><a th:href="#" href="#">Blog</a></li>
<!--li>Help</li-->
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Can some one help me to fix this issue. I have included collapse.js in my path.
You're missing the navbar class which is the first line of the default navigation in Bootstrap. See Docs.
<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" />
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><img src="http://placehold.it/350x150" style="width:80px; position:relative; top:-20px;"></img></h3>
<nav class="navbar navbar-default">
<div class="container">
<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="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-top:15px;background-color:rgba(255,255,255,.4)">
<li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a>
</li>
<li><a th:href="#{/X}" href="#">X</a>
</li>
<li><a th:href="#{/Y}" href="#">Y</a>
</li>
<li><a th:href="#{/Z}" href="#">Z</a>
</li>
<li><a th:href="#{/T}" href="#">C</a>
</li>
<li class="active"><a th:href="#" href="#">Blog</a>
</li>
<!--li>Help</li-->
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</div>
I have a navbar-brand with a logo and button and they stretch out when viewed on an iPhone while the menu is collapsed.
How can I prevent this?
<header id="header">
<nav class="navbar navbar-inverse navbar-fixed-top" role="banner">
<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.html"><img src="images/logo.png" alt="logo"></a>
<div class="slogan"><p> PERTAMA DI INDONESIA : </p><div class="slogs">Dengan Formula Plastik Baja</div><p></p></div>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>PRODUCTS</li>
<li>HOW IT WORKS</li>
<li>OUR PROJECTS</li>
<li>CONTACT</li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header>
Try to add class="img-responsive" to img.
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="images/logo.png" alt="logo">
</a>