I want to a add 3 column bootstrap menu in WordPress, but i am unable to do this. I have tried a lot, but the sub menus and the columns are not not shows. can any one please help me.
Here is my bootstrap code.
<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="#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="<?php bloginfo('url')?>">
<img alt="Brand" src="img/is-logo.png">
</a>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Information <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><span class="icon-airplane"></span> Airlines</li>
<li><span class="icon-github"></span> Animal</li>
<li><span class="icon-apple"></span> Apple</li>
<li>
<a href="#">
<span class="icon-Flag_of_Bangladesh"><span class="path1"></span><span class="path2"></span></span>
Bangladesh
</a>
</li>
<li><span class="icon-twitter"></span> Birds</li>
<li><span class="icon-droplet"></span> Blood</li>
<li><span class="icon-git-cat"></span> Cat</li>
<li>
<a href="#">
<span class="icon-Flag_of_China"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span><span class="path20"></span><span class="path21"></span><span class="path22"></span><span class="path23"></span></span>
China
</a>
</li>
<li>
<a href="#">
<span class="icon-Flag_of_Denmark">
<span class="path1"></span><span class="path2"></span><span class="path3"></span>
</span>Denmark
</a>
</li>
<li><span class="icon-library"></span> Education</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><span class="icon-airplane"></span> Airlines</li>
<li><span class="icon-github"></span> Animal</li>
<li><span class="icon-apple"></span> Apple</li>
<li>
<a href="#">
<span class="icon-Flag_of_Bangladesh"><span class="path1"></span><span class="path2"></span></span>
Bangladesh
</a>
</li>
<li><span class="icon-twitter"></span> Birds</li>
<li><span class="icon-droplet"></span> Blood</li>
<li><span class="icon-git-cat"></span> Cat</li>
<li>
<a href="#">
<span class="icon-Flag_of_China"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span><span class="path20"></span><span class="path21"></span><span class="path22"></span><span class="path23"></span></span>
China
</a>
</li>
<li>
<a href="#">
<span class="icon-Flag_of_Denmark">
<span class="path1"></span><span class="path2"></span><span class="path3"></span>
</span>Denmark
</a>
</li>
<li><span class="icon-library"></span> Education</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><span class="icon-airplane"></span> Airlines</li>
<li><span class="icon-github"></span> Animal</li>
<li><span class="icon-apple"></span> Apple</li>
<li>
<a href="#">
<span class="icon-Flag_of_Bangladesh"><span class="path1"></span><span class="path2"></span></span>
Bangladesh
</a>
</li>
<li><span class="icon-twitter"></span> Birds</li>
<li><span class="icon-droplet"></span> Blood</li>
<li><span class="icon-git-cat"></span> Cat</li>
<li>
<a href="#">
<span class="icon-Flag_of_China"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span><span class="path20"></span><span class="path21"></span><span class="path22"></span><span class="path23"></span></span>
China
</a>
</li>
<li>
<a href="#">
<span class="icon-Flag_of_Denmark">
<span class="path1"></span><span class="path2"></span><span class="path3"></span>
</span>Denmark
</a>
</li>
<li><span class="icon-library"></span> Education</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
</nav>
dropdown menus wont work noramly in the wordpress so use Walker Class that will make them work
Related
I'm using bootstrap navigation, and it's working perfectly when collapsed in android and chrome.
But when I tested it on an iPhone the dropdown list appears much lower in the screen, and I don't know what's causing this spacing.
the dropdown list also always appears behind other items like photos or sliders with iphone (works perfectly in android).
<header>
<div class="header-container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">
<img class="tbc-logo" src="/NewDesign/img/tbc-logo.png">
</a>
</div>
<div id="language">
عربي
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--NAVIGATION -->
<ul class="nav navbar-nav ">
<li>Home <span class="sr-only">(current)</span></li>
<li class="dropdown">
About Us <span class="caret"></span>
<ul class="dropdown-menu">
<li>About TBC </li>
<li>Projects</li>
</ul>
</li>
<li class="dropdown">
Our Programs <span class="caret"></span>
<ul class="dropdown-menu">
<li>Private Schools</li>
<!-- <li role="separator" class="divider"></li>-->
<li>Investment </li>
</ul>
</li>
<li>Prequalification <span class="sr-only">(current)</span></li>
<li class="dropdown">
Careers <span class="caret"></span>
<ul class="dropdown-menu">
<li> Vacancies</li>
<li> COOP Training</li>
</ul>
</li>
<li class="dropdown">
Media files <span class="caret"></span>
<ul class="dropdown-menu">
<li>News</li>
<li>Photos</li>
<li>Library </li>
</ul>
</li>
<li>Contact Us <span class="sr-only">(current)</span></li>
</ul>
<!--END NAVBAR-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</header>
I'm facing the same issue with chrome in iphone as well..
I have created a navbar with Bootstrap 4 alpha 6 that has a large brand/icon on the left, and 2 navbar-nav's with links to the right of the icon. One nav has links, and the other nav has icons. It's working exactly as I want except for one thing.
I'd like the 2 navbars to appear in 2 separate rows to the right of the icon. Like this:
------------------------------------------------------
link link link link
brand-icon -------------------------------------------
icon icon icon
------------------------------------------------------
The mobile version will still show the links vertically as it does now. I've tried several different things with flexbox, but can't get it to work.
Here is my code:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="py-2 ml-lg-2 mx-3"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></h1>
<div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>
You can use the flex-column flexbox utility class to stack the 2 navs vertically next to the icon. This sets flex-direction: column on the navbar-collapse div so that it's child elements stack vertically.
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="py-2 ml-lg-2 mx-3"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></h1>
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2">
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>
Demo - Bootstrap 4 navbar with 2 rows
Here's another variation with the 2 rows and right align search form:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand my-auto" href="#">Brand</a>
<div class="collapse navbar-collapse flex-md-column" id="navbarCollapse">
<ul class="navbar-nav ml-auto small">
<li class="nav-item active">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<form class="form-inline ml-auto">
...
</form>
</div>
</nav>
Demo - Navbar with 2 rows on right
Update for Bootstrap 4.0.0:
https://www.codeply.com/go/05hEHoiUvv
Here is an alternate scenario with 2 navbars with one mobile toggler
Bootstrap 4.0 - Two NavBars that collapse into one toggle
How can I have Brand and Navbar on separate lines?
How move 'nav' element under 'navbar-brand' in my Navbar
How to place navbar below sticky navbar using bootstrap 4?
Bootstrap 4 Multiple fixed-top navbars
The "variation with the 2 row aligned right" did not right-align the rows in Safari for me. I put the unordered lists in a new div with the flex-column and ml-auto classes.
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button>
<h1 class="py-2 ml-lg-2 mx-3"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></h1>
<div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
<div class="flex-column ml-auto">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Product</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Shop</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Events</a> </li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a> </li>
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a> </li>
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a> </li>
</ul>
</div>
</div>
</div>
</nav>
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand col-lg-1" href="#">
<img src="../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
SMS-WEB
</a>
<!--me-auto mb-2 mb-lg-0 -->
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 col-lg-11" id="navbarSupportedContent">
<ul class="navbar-nav col-lg-12 " >
<li class="nav-item col-lg-8">
<app-searchbox class=""></app-searchbox>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button></li>
<li class="nav-item " style="display:inline-flex;">
<span style="font-size: 2em; color: Tomato;" class="pr-2 text-wrap">
<fa icon="user" class=""/></span>
<div style="display:block">
<div class="row-1 " style="font-size:13px">
<a class="nav-link active p-0" href="#">Hello, Sign in</a>
</div>
<div class="row-2" style="font-size:15px"><span>My Account</span></div>
</div>
</li>
<li class="nav-item ">
<span style="font-size: 2em; color: Tomato;" class="pr-2 pl-3 text-wrap">
<fa icon="heart" class=""/></span>
</li>
<li class="nav-item " style="display:inline-flex;" id="nav-cart" >
<span style="font-size: 2em; color: Tomato;" class="pl-2 pr-2 text-wrap rounded-circle" >
<fa :icon="['fas', 'cart-plus']"></fa></span>
<div style="display:block">
<div class="row-1" style="font-size:13px">
<a class="nav-link active p-0" href="#">My cart</a>
</div>
<div class="row-2" style="font-size:15px" ><span>Rs: 2500/=</span>
</div>
</div>
<app-dropcart id="drop-cart"/>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2 col-lg-12" >
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
import searchbox from '#/components/search.vue'
import dropCart from '#/components/drop-cart.vue'
export default {
name: 'navbar',
props: {
msg: String
},
components: {
'app-searchbox':searchbox,
'app-dropcart':dropCart
}
}
</script>
<style lang="sass">
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand col-lg-1" href="#">
<img src="../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
SMS-WEB
</a>
<!--me-auto mb-2 mb-lg-0 -->
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 col-lg-11" id="navbarSupportedContent">
<ul class="navbar-nav col-lg-12 " >
<li class="nav-item col-lg-8">
<div class="container ">
<form class="d-flex">
<input class="form-control rounded-0 ml-5" type="search" placeholder="Search product here..." aria-label="Search">
<button class="btn btn-outline-success rounded-0" type="submit">Search</button>
</form>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button></li>
<li class="nav-item " style="display:inline-flex;">
<span style="font-size: 2em; color: Tomato;" class="pr-2 text-wrap">
<i class="fas fa-cart-plus"></i></span>
<div style="display:block">
<div class="row-1 " style="font-size:13px">
<a class="nav-link active p-0" href="#">Hello, Sign in</a>
</div>
<div class="row-2" style="font-size:15px"><span>My Account</span></div>
</div>
</li>
<li class="nav-item ">
<span style="font-size: 2em; color: Tomato;" class="pr-2 pl-3 text-wrap">
<i class="fas fa-cart-plus"></i></span>
</li>
<li class="nav-item " style="display:inline-flex;" id="nav-cart" >
<span style="font-size: 2em; color: Tomato;" class="pl-2 pr-2 text-wrap rounded-circle" >
<fa :icon="['fas', 'cart-plus']"></fa></span>
<div style="display:block">
<div class="row-1" style="font-size:13px">
<a class="nav-link active p-0" href="#">My cart</a>
</div>
<div class="row-2" style="font-size:15px" ><span>Rs: 2500/=</span>
</div>
</div>
<app-dropcart id="drop-cart"/>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2 col-lg-12" >
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- help http://wa.me/+94711308100 -->
I know this question has been asked several times and i checked through all the possible solutions but none worked perfectly for me.
Here is my problem:
I am using bootstrap 3.2 and i have created a navbar working perfectly in chrome, firefox and latest IE but not in IE8,7. I tried adding the following files but it didnt help:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Other than that, i tried adding: filter: none !important; and removed .collapse{display:none} But after playing with these things i got a menu in vertical position rather than horizontal. Here are the two images showing the dropdown menu Before and After the hacks i tried.
IE8
IE11
After removing .collapse{display:none}
Here is my code:
<div class="navbar navbar-inverse">
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"> <span class="glyphicon glyphicon-home"></span> </li>
<li class="dropdown">
Tipologie mandrini
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo modello</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
Singoli mandrini
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo mandrini</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
Macchine
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo macchina</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
Montaggio
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo montaggio</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
Smontaggio
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo Smontaggio</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
SKF SF riparazione
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi riparazione</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
<li class="dropdown-submenu">
Ship
<ul class="dropdown-menu">
<li>Ship to Cassino</li>
</ul>
</li>
<li class="dropdown-submenu">
Accept
<ul class="dropdown-menu">
<li>Accept spindle(s)</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
Altro fornitore
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi altro fornitore</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
</ul>
</div>
</div>
NOTE: I am using YETI theme provided here: http://bootswatch.com/yeti/
I believe there is an answer to your problem over here: IE8 issue with Twitter Bootstrap 3.
It appears that respond.js only works for local files. The referenced stackoverflow article mentions tring your website on IE8 with a local copy of bootstrap.css. Hope this helps.
I am using multinavbar but when i see in mobile toggle and menu are not working
here's the code
<div class="navbar navbar-default navbar-static-top" role="navigation" style="height: 114px;margin-top: -51px;width: 1134px;margin-left: 143px;">
<div class="navbar-header" style=" margin-top: 29px;">
<div class="navbar-header"><a class="navbar-brand" href="#">News</a></div>
</div>
</div>
<div class="navbar navbar-default navbar-static-top" role="navigation" style="margin-top: -19px;width: 1134px;margin-left: 143px;height: 45px;"> <div class="navbar-header">
<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>
<a class="navbar-brand" href="#"></a>
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
NEWS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>MOVIE NEWS</li>
<li>OTHER NEWS</li>
</ul>
</li>
<li class="dropdown">
REVIEWS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>MOVIE REVIEWS</li>
<li>AUDIO REVIEWS</li>
</ul>
</li>
<li class="dropdown">
VIDEOS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>TRAILERS </li>
<li>POPULAR VIDEOS </li>
<li>Audio launch in US is a bad idea </li>
<li>SHORTS </li>
<li>OTHERS </li>
</ul>
</li>
<li>INTERVIEWS</li>
<li>KIDS</li>
</ul>
<div class="col-sm-3 col-md-3 pull-right" style="margin-top: -22px;">
<div class="navbar-text"></div>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Fixed navbar --><!--
<nav class="navbar navbar-default navbar-fixed-top">
<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="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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
NEWS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>MOVIE NEWS</li>
<li>OTHER NEWS</li>
</ul>
</li>
<li class="dropdown">
REVIEWS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>MOVIE REVIEWS</li>
<li>AUDIO REVIEWS</li>
</ul>
</li>
<li class="dropdown">
VIDEOS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>TRAILERS </li>
<li>POPULAR VIDEOS </li>
<li>Audio launch in US is a bad idea </li>
<li>SHORTS </li>
<li>OTHERS </li>
</ul>
</li>
<li>INTERVIEWS</li>
<li>KIDS</li>
<li>LIFESTYLE</li>
<div class="input-group custom-search-form">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</ul> -->
</div>
</div><!--/.nav-collapse -->
</div>
</nav>
when i see in mobile it's not showing toggle and dropdown not working any help would be appreciated.
regards
Put your navbar in a div.container.
Then, you need to address the correct data-target with your toggle-button. in your case, it would be .navbar-collapse instead of #navbar (which doesn't even exists in your example, as far as i digged into it - there is one in the code you commented out though ;) )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header" style=" margin-top: 29px;">
<a class="navbar-brand" href="#">News</a>
</div>
</div>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" 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-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
NEWS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>MOVIE NEWS</li>
<li>OTHER NEWS</li>
</ul>
</li>
<li class="dropdown">
REVIEWS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>MOVIE REVIEWS</li>
<li>AUDIO REVIEWS</li>
</ul>
</li>
<li class="dropdown">
VIDEOS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>TRAILERS </li>
<li>POPULAR VIDEOS </li>
<li>Audio launch in US is a bad idea </li>
<li>SHORTS </li>
<li>OTHERS </li>
</ul>
</li>
<li>INTERVIEWS</li>
<li>KIDS</li>
</ul>
<div class="col-sm-3 col-md-3 pull-right" style="margin-top: -22px;">
<div class="navbar-text"></div>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
IMO, the "multi-navbar" is a bit useless. you could gladly merge then (put the header in the collapsable navbar instead of creating a seperate navbar just for the word...)
**DEMO **
This works fine..
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-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="#">NEWS</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
NEWS <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>MOVIE NEWS</li>
<li>Other NEWS</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
REVIEWS <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>MOVIE REVIEWS</li>
<li>AUDIO REVIEWS</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
VIDEOS <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>TRAILERS </li>
<li>POPULAR VIDEOS </li>
<li>Audio launch in US is a bad idea </li>
<li>SHORTS </li>
<li>OTHERS </li>
</ul>
</li>
<li>INTERVIEWS</li>
<li>KIDS</li>
</ul>
</div>
</nav>
I'm triying to combine these two menus:
http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/
http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/
The first one will stay unchanged and the submenu in the second one will be used with it. But as i begin to change the css code and make these to merge, i always encounter a particular error. The "ul,li and a" properties of the "responsive-retina-ready-menu" effects the submenu that i take from "overlay-effect-menu" and i can not separate these properties. I mean it shows the submenu as it has the same style with the main menu. What can i do about it?
The one i have:
<div class="main clearfix">
<nav id="menu" class="nav">
<ul>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-home"></i>
</span>
<span>Menu 1</span>
</a><div class="cbp-hrsub">
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-services"></i>
</span>
<span>Menu 2</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-portfolio"></i>
</span>
<span>Menu 3</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-blog"></i>
</span>
<span>Menu 4</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-team"></i>
</span>
<span>Menu 5</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 6</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 7</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 8</span>
</a>
</li>
</ul>
</nav>
</div>
The one i want:
<div class="main clearfix">
<nav id="menu" class="nav">
<ul>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-home"></i>
</span>
<span>Menu 1</span>
</a><div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
<li>Fallen Angel</li>
<li>Sui Maker</li>
<li>Wave Master</li>
<li>Golf Pro</li>
</ul>
</div>
<div>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li>Learn Thai</li>
<li>Math Genius</li>
<li>Chemokid</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0</li>
<li>Moneymaker</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-services"></i>
</span>
<span>Menu 2</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-portfolio"></i>
</span>
<span>Menu 3</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-blog"></i>
</span>
<span>Menu 4</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-team"></i>
</span>
<span>Menu 5</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 6</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 7</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 8</span>
</a>
</li>
</ul>
</nav>
</div>
Like I mentioned in my comments you need to specify the styles of parent and children elements separately.
For example, in order to set list-style:none to parent uls you need the following CSS selector:
ul {
list-style:none;
}
To keep the default styling to children uls, you need to add the following selector after the previous one:
ul ul {
list-style:disc;
}
Here's a demo based on the HTML given in OP with minimal styling but illustrating the way you can style parent and child elements separately. (Note: Hover on Menu 1)