I have built my navbar navigation links to pull-right (which is how I want it) but upon collapse the links also pull-right which looks weird (see image). I would like to figure out how to modify the code so that the navigation pull-left when collapsed. Demo
Please let me know if you can help.
My template code and site-specific css is below:
![<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/site-specific.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse 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>
</div>
<div class="collapse navbar-collapse pull-right">
<ul class="nav navbar-nav pull-left">
<li>Home</li>
<li>About</li>
<li class="dropdown">
Browse by Neighbourhood<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Notting Hill</li>
<li>Marylebone</li>
<li>West End</li>
<li>Mayfair</li>
<li>Soho</li>
<li>Covent Garden</li>
<li>Chelsea</li>
<li>Camden</li>
<li>Shoreditch<li>
<li>Tower Bridge<li>
<li>All<li>
</ul>
</li>
<li>Contact</li>
</ul>
</div><!--.nav-collapse-->
</div>
</div>
<h1>LONDON</h1>
{% block content %}{% endblock %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
.navbar {
background-color: #33B833;
font-family: 'Raleway', sans-serif;}
.navbar .nav > li > a {
color: #ffffff;}
.navbar .nav > li > a:hover {
color: #000000;}
.navbar-inverse .navbar-nav > .open >a:hover, .navbar-inverse .navbar-nav > .open >a:focus, .navbar-inverse .navbar-nav > .open >a {
background-color: #33CC33;
}][4]
I finally figured it out - should be .navbar-right instead of .pull-right! Hope this helps someone out in the future!
This is what you need in your styles.css Give it a try.
#media (max-width: 768px) {
.navbar-collapse {
float: left;
}
}
Add Pull-right class to dropdown-menu
Browse by Neighbourhood<span class="caret"></span>
<ul class="dropdown-menu pull-right" role="menu">
<li>Notting Hill</li>
<li>Marylebone</li>
<li>West End</li>
<li>Mayfair</li>
<li>Soho</li>
<li>Covent Garden</li>
<li>Chelsea</li>
<li>Camden</li>
<li>Shoreditch<li>
<li>Tower Bridge<li>
<li>All<li>
</ul>
Related
I am new to coding and I am trying to use Bootstrap.
However, I can't find out how to overwrite the default Bootstrap code with my own CSS.
I have searched and the common suggestions were:
1. Link my own stylesheet after Bootstrap.
2. Make my references more specific than Bootstrap (such as navbar-link a instead of just a).
3. Add !important to my CSS (which should be avoided).
I tried all of these and still struggle to get my CSS applied. What am I doing wrong? Could somebody please point me in the right direction?
Below is an example using the navbar and links. The background color gets applied but none of the stylings for a elements works. I tried various grades of being more specific but none of which seem to work.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- my css below-->
<link rel="stylesheet" href="CSS/main.css" type="text/css">
<title>ML</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="index.html"><img src="img/logo-small.png" alt="Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
CSS
body {
background-color: #3c896d;
}
.navbar-light .navbar-nav .nav-link a:visited {
color: #3c896d;
}
.navbar-light .navbar-nav .nav-link a:hover {
color: #db5461;
}
.navbar-light .navbar-nav .nav-item .nav-link a {
color: #db5461;
}
You've got the right styles. The reason you're not seeing your styles getting applied is because you're not targetting the selectors correctly in the CSS.
For instance,
.navbar-light .navbar-nav .nav-item .nav-link a
should be changed to
.navbar-light .navbar-nav .nav-item .nav-link
You don't need to target the "a" tag after the .nav-link. when you add a space between selectors in CSS such as ".navbar-light .navbar-nav", it means that you are selecting all the child nodes that contain the class "navbar-nav" that belong to the parent ".navbar-light".
In your case, you had ".navbar-light .navbar-nav .nav-item .nav-link a" so the browser looks for all <a> tags/selectors that are under the ".nav-link" selector. Which, in this case, does not exist. Instead, you have an <a> tag that which itself has the class "nav-link" (and not it's child elements)
Here's a great article to help you understand how to target the CSS selectors correctly so you can apply the right styles.
https://css-tricks.com/whats-the-difference/
And as for your answer, here's what the CSS should be changed to
body {
background-color: #3c896d;
}
.navbar-light .navbar-nav a.nav-link {
color: #3c896d;
}
.navbar-light .navbar-nav a.nav-link:hover {
color: #db5461;
}
.navbar-light .navbar-nav .nav-item .nav-link {
color: #db5461;
}
I have a section in my header named #contact-stripe that has a space/gap between it and the navbar. However, I don't see anywhere that has padding or margin so I'm stumped.
I put this on CodePen which may make it easier to see.
I've used Chrome's inspect to try and find anything that is using margin/padding and just can't find it.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Raleway:400,400i,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Listing Naples</title>
</head>
<body>
<header>
<!-- Contact Stripe -->
<section id="contact-stripe">
<div class="container">
<span class="float-left"><i class="fas fa-envelope"></i> Email Us</span>
<span class="float-right">
<div class="telephone align-middle">
<i class="fas fa-phone d-sm-inline-block align-middle"></i>
<span class="telephone-number d-sm-inline-block align-middle">(239) 248-8171</span>
</div>
</span>
<ul class="social">
<li class="align-middle"><i class="fab fa-facebook-square"></i></li>
<li class="align-middle"><i class="fab fa-twitter-square"></i></li>
<li class="align-middle"><i class="fab fa-instagram"></i></li>
<li class="align-middle"><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</section>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-custom">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://s3.amazonaws.com/listing-naples/assets/listing-naples-logo.png" alt="Listing Naples Team Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Buying</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Selling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About our Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 ml-4 my-lg-0">
<input class="form-control-sm mr-sm-2 custom-input-sm" type="search" placeholder="MLS Number" aria-label="Search">
</form>
</div><!-- end collapse navbar-collapse div-->
</div><!-- end container div -->
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
CSS
body {
font-family: 'Source Sans Pro', sans-serif;
padding:0;
}
#contact-stripe {
background-color: #000;
border-bottom: 1px solid #353a3b;
color: rgba(255, 255, 255, 0.5);
}
ul.social{
text-align:center;
list-style-type:none;
}
ul.social li {
display:inline-block;
border-right:1px solid #353a3b;
}
ul.social li:first-of-type {
border-left: 1px solid #353a3b;
}
.telephone {
background-color:red;
}
.telephone-number {
background: teal;
}
.navbar-custom {
background-color:#000;
}
header li {
padding: .5rem;
margin:0;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
font-weight:400;
font-size: 1rem;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link, .navbar-custom li:hover {
color: white;
background-color: orange;
}
.active {
background-color: orange;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lora', sans-serif;
}
h1 {
font-size: 1.8rem;
font-weight: bold;
}
Because your ul.social has a margin-bottom of 1rem.
just add this css to fix:
ul.social {
margin-bottom: 0;
}
I am using bootstrap 3 navbar functionality. The navbar is working fine when not collapsed but when the nabar collapses, the button is not at all working and not showing the menu option. I really dont understand what is causing this problem. I tried figuring it out but couldnt find any solution. Any help would be greatly appreciated. When I use computer path to refer the bootstrap files then toggle button is not working but when i use web address its working. Can anybody please help me on this
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Jobs 4 U
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script type="text/javscript" src="jquery-1.11.3.min.js"></script>
<script type="text/javscript" src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
.mt-top{
margin-top:75px;
}
.mt-top1{
margin-top:325px;
}
.vertical-center-row{
display:table-cell;
vertical-align: middle;
}
.colht1{
height:100px;
border: 5px solid yellow;
}
.navbar-custom {
background-color:#ffffff;
color:#ffffff;
border-radius:0;
padding:10px;
}
.ht{
height:300px;
}
h2,h3{
text-align: center;
}
sup{
color:red;
}
.bck{
background-image: url('images/job_index.jpg');
background-repeat:no-repeat;
background-size: cover;
height:600px;
}
.abtpad{
padding:5px;
margin-bottom:10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<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>
<a class="navbar-brand" href="index.php">Jobs 4u</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">How it Works</li>
<li class="">
<a class="" href="JobSeeker.php">Jobseeker</a>
</li>
<li class="">
<a class="" href="Employer.php">Employer</a>
</li>
<li class="">
<a class="" href="contactus.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
my title inside my navbar for some reason is not moving to the center as I want to. I tried using padding, text-align and use right function all doesn't work. Can anyone help me? I tried following this question here but nothing happens, bootstrap 3 - how do I place the brand in the center of the navbar?
Here is the code whole code so sorry for the mess:
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" 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>
<html>
<head>
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Summary</li>
<li class="dropdown">
Edit User Information <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Personal Information Edit</li>
</ul>
</li>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>#yield('title')</h3>
</li>
</ul>
</div>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
css style I used it like this:
style.css
body{
margin:0px;
padding:0px;
font-family:"Helvetica Neue", Helvetica, Arial;
}
#sidebar{
background:blue;
width:200px;
height:100%;
display:block;
position: fixed;
left:-200px;
top:0px;
transition:left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
list-style-type:none;
display:flex;
justify-content: center;
}
ul li{
list-style:none;
}
ul li a{
background:#0000FF;
color: white;
border-bottom:1px solid #111;
display:block;
width:180px;
padding:10px;
text-decoration: none;
}
#sidebar-btn{
display:inline-block;
vertical-align: middle;
width:20px;
height:15px;
cursor:pointer;
margin:20px;
position:absolute;
top:0px;
right:-60px;
}
#sidebar-btn span{
height:1px;
background: white;
margin-bottom:5px;
display:block;
}
#sidebar-btn span:nth-child(2){
width:75%;
}
#sidebar-btn span:nth-child(3){
width:50%;
}
#navbar-toggle collapsed{
background:#0000FF;
}
.navbar {background:#0000FF;}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: white;
background-color: transparent;
}
#center-text ul{
list-style-type:none;
display:flex;
justify-content: center;
}
This should work
ul{
list-style-type:none;
display:flex;
justify-content: center;
}
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li><h3>Text</h3></li>
</ul>
This shouldn't interfere with other classes
#center-text ul{
list-style-type:none;
display:flex;
justify-content: center;
}
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>Text</h3>
</li>
</ul>
</div>
I have strange problem from the mobile menu. When I want to create a version for small, medium, large device 4 columns dropdown menu.
In the menu on the Extra Small Devices <768px:
When I click Link1>TEST
He is brings me to the url located under LINK2. Why?
If a click Link3>TEST
(Aslo 4 columns menu for larger device)
Everything is OK.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Test menu</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body{
background: #000000;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 3px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #ffffff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
#media(min-width:768px) {
#double li { width:25%;
float:left;
display:inline;
margin-bottom: 14px;
}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;
min-width: 500px;
}
}
#media(max-width:767px) {
#double li { width:100%;
float:left;
display:inline;
}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;
min-width: auto;
}
}
</style>
</head>
<body>
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar 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="#">Logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class=" dropdown">
Link1 <span class="caret"></span>
<ul class="dropdown-menu" id="double">
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
</ul>
</li>
<li>Link2</li>
<li class=" dropdown">
Link3 <span class="caret"></span>
<ul class="dropdown-menu" id="double">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Ok I solved this problem.
The answer if someone had the same problem
#media(min-width:768px) {
#double {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
#media(max-width:767px) {
#double {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
You've given both dropdowns the same ID. Not sure why that caused the behavior you're getting but fixing those fixes the menus:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class=" dropdown">
Link1 <span class="caret"></span>
<ul class="dropdown-menu" id="double1">
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
</ul>
</li>
<li>Link2</li>
<li class=" dropdown">
Link3 <span class="caret"></span>
<ul class="dropdown-menu" id="double2">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</li>
</ul>
</div>
Normally, I'd do a runnable snippet but your styles were being overwritten by the Bootstrap styles here.