I retrieved a code on Bootsnipp, which I try to adapt ...
I would like the menu present in the drop down to appear in the sidebar
How to do it?
The JsFiddle : https://jsfiddle.net/2hpxxpez/
HTML :
<header role="banner" class="navbar navbar-default">
<div class="container">
<button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left">
<i class="glyphicon glyphicon-menu-hamburger"></i>
</button>
<div class="side-collapse in">
<nav role="navigation" class="navbar-collapse">
<!-- <ul class="nav navbar-nav" >
<li>Home</li>
<li>Users</li>
<li>Places</li>
</ul> -->
<ul class="nav navbar-nav" >
<li class="dropdown">
<a><span class="caret"></span></a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container side-collapse-container">
<h1>Hello</h1>
<p>This is a side opening nav demonstration</p>
<p>Make your browser smaller and the top menu wil become into a lateral slider menu</p>
</div>
Javascript :
$(document).ready(function() {
var sideslider = $('[data-toggle=collapse-side]');
var sel = sideslider.attr('data-target');
var sel2 = sideslider.attr('data-target-2');
sideslider.click(function(event){
$(sel).toggleClass('in');
$(sel2).toggleClass('out');
});
});
I want this result :
i had created a fiddle for you hope it will help you click here you just need to toggle the class.
$('li.dropdown').click(function() {
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
$(document).ready(function() {
var sideslider = $('[data-toggle=collapse-side]');
var sel = sideslider.attr('data-target');
var sel2 = sideslider.attr('data-target-2');
sideslider.click(function(event){
$(sel).toggleClass('in');
$(sel2).toggleClass('out');
});
});
#media screen and (max-width: 768px) {
.side-collapse-container{
width:100%;
position:relative;
left:0;
transition:left .4s;
}
.side-collapse-container.out{
left:200px;
}
.dropdown-nave-block .dropdown-menu{ display: block !important;}
.side-collapse {
top:51px;
bottom:0;
left:0;
width:200px;
position:fixed;
overflow:hidden;
transition:width .4s;
background-color: #f8f8f8;
}
.side-collapse a {
border-bottom: 1px solid #e7e7e7;
}
.side-collapse.in {
width:0;
}
}
<script src="https://code.jquery.com/jquery-1.11.3.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"/>
<body>
<header role="banner" class="navbar navbar-default">
<div class="container">
<button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left">
<i class="glyphicon glyphicon-menu-hamburger"></i>
</button>
<div class="side-collapse in">
<nav role="navigation" class="navbar-collapse">
<ul class="nav navbar-nav" >
<li>Home</li>
<li>Users</li>
<li>Places</li>
</ul>
<ul class="nav navbar-nav" >
<li class="dropdown dropdown-nave-block open" >
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true" >Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container side-collapse-container">
<h1>Hello</h1>
<p>This is a side opening nav demonstration</p>
<p>Make your browser smaller and the top menu wil become into a lateral slider menu</p>
</div>
i have change same html add dropdown class and
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
Related
I have dropdown menu on my website. Here is code
<nav class="navbar navbar-custom navbar-fixed-top top-nav-collapse" role="navigation">
<div class="container" style="height:80px;">
<div class="navbar-header" style="">
<button type="button" class="navbar-toggle glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"><img style="width:100px;height:50px;" src="/img/logo10.png"></i>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse" >
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#about">О нас</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#Url.Action("Courses","Home")">Курсы</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#Url.Action("Development","Home")">Разработка</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="active">
<a class="page-scroll" href="#contact">Контакты</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="active">
<a class="page-scroll" href="#Url.Action("Index","Blog")">VR Блог</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Now it transparent. I try to change background to red.
Here is code of bootstrap css
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: red;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
margin-bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background-color: red;
}
But it still left transparent. I don't understand where is problem?
How I can change background color of dropdown menu?
Please check it here: https://jsbin.com/hekaxexeki/edit?html,css,output
.navbar-collapse.collapse.in{
background-color:lightgreen;
}
Working snippet:
.navbar-nav > li {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: red;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
margin-bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-custom navbar-fixed-top top-nav-collapse" role="navigation">
<div class="container" style="height:80px;">
<div class="navbar-header" style="">
<button type="button" class="navbar-toggle glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"><img style="width:100px;height:50px;" src="/img/logo10.png"></i>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse" >
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#about">О нас</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#Url.Action("Courses","Home")">Курсы</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#Url.Action("Development","Home")">Разработка</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="active">
<a class="page-scroll" href="#contact">Контакты</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="active">
<a class="page-scroll" href="#Url.Action("Index","Blog")">VR Блог</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
You don't address any existing element with your selector. Try this:
.navbar-nav > li {
background-color: red;
}
All you need to do is writing this to your css that you created
.navbar{background-color : red;}
I am working on Bootstrap navbar and after resizing as the hamburger menu shows the logo shifts its position and even overflows the navbar. How can I make the logo responsive so that it changes its size or position as the navbar is resized in the window?
<!-- Navigation Bar -->
<div class="navbar navbar-default" id="navbar-outer">
<div class="container-fluid" style="margin:0px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class=" glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<a class="navbar-brand" href="#">
<img src="../images/LOL_LOGO_NEW-01.png" />
</a>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar navbar-nav" id="navbar-menu">
<li><a href="#" >WHAT WE DO</a></li>
<li>WHO WE ARE</li>
<li>OUR WORK</li>
<li>VENTURES</li>
<li>BLOG</li>
<li>CONNECT</li>
</ul>
</div>
</div>
Also, along with the answer if you could provide me with the reason as to why it happened then it'll be appreciated as I am still in the learning phase.
Thanks. :)
without resizing it looks normal
look how it overflows on resize
I added some background color so you can easily see the block for each container. The logo will be red, the navbar-header will be yellow, and the navbar-collapse will be green.
navbar-brand has a float: left so it will float to the left of the block, if you have it after navbar-header(which has display:block so it will take the whole width of the screen) block it will just floating left below, you can move it inside navbar-header or move it up outside of container-fluid.
.navbar-brand {
background: red;
float: right;
display: block;
}
.navbar-header {
background: yellow;
}
.navbar-collapse {
background: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<!-- Navigation Bar -->
<div class="navbar navbar-default" id="navbar-outer">
<div class="container-fluid" style="margin:0px;">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="../images/LOL_LOGO_NEW-01.png" />
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class=" glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar navbar-nav" id="navbar-menu">
<li>WHAT WE DO</li>
<li>WHO WE ARE</li>
<li>OUR WORK</li>
<li>VENTURES</li>
<li>BLOG</li>
<li>CONNECT</li>
</ul>
</div>
</div>
When I run my code locally, my Javascript works perfectly. But after I deploy to Heroku, none of it works anymore. Why is that?
Javascript: (file called basic.js)
$(window).scroll(function() {
if ($(document).scrollTop() > 700) {
$('nav').addClass('shrink');
}
else {
$('nav').removeClass('shrink');
}
});
HTML:
<nav id="mainNav" class="navbar navbar-fixed-top">
<div class="navbar-contents">
<div class="collapse navbar-collapse">
<ul class="nav">
<li>
<a class="page-scroll" href="gallery.html">GALLERY</a>
</li>
<li>
<a class="page-scroll" href="#contact-us">CONTACT</a>
</li>
<li>
<a class="page-scroll" href="#customer-quote">WHAT WE DO</a>
</li>
<li>
<a class="page-scroll" href="#showcase-section">SHOWCASE</a>
</li>
<li>
<a class="page-scroll" href="#about-section">ABOUT US</a>
</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="basic.js"></script>
CSS:
#mainNav.shrink {
background-color: darkgray;
transition: 0.8s;
-webkit-transition: 0.8s;
}
Thanks in advance for the help.
How do i make my navigation bar scroll down together with the page? I have found some answers here but I'm having a hard time cause the code for my navigation bar is in another file and I just used <?php include ("includes/navbar.php"); ?> to incorporate it to my other pages. Here are my codes so far: What I'm planning to do is if I scroll my page down the navigation bar will be on top of the page
Navigation
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<!-- Button for smallest screens -->
<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" href="index.html">
<img src="assets/images/logo.png" alt="Techro HTML5 template"></a>-->
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right mainNav">
<li class="c1 active">Home</li>
<li class="c1">Profile</li>
<li class="c1">Games</li>
<li class="c1">Top Players</li>
<li class="c1">About</li>
<li class="c1 dropdown">
Settings <b class="caret"></b>
<ul class="dropdown-menu">
<li><a data-toggle="modal" data-target='#change'>Change Password</a></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--MODAL-->
<?php include("includes/changepass.php");?>
<!--END MODAL-->
</div>
CSS
.navbar-inverse .navbar-nav > li.c1 a{
color: #00A8FF;
}
.navbar-inverse .navbar-nav > li.c1 a:hover, .navbar-inverse .navbar-nav > li.c1.active a{
color:#fff;
background: #00A8FF;
}
JS
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function () {
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
$('.navbar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('.navbar').removeClass('navbar-fixed');
}
});
});
</script>
Here's how my page looks
May be you are looking for this. View in fullscreen
You should add $('.navbar').addClass('navbar-fixed-top');
$(document).ready(function() {
$(window).scroll(function() {
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
$('.navbar').addClass('navbar-fixed-top');
}
if ($(window).scrollTop() < 281) {
$('.navbar').removeClass('navbar-fixed-top');
}
});
});
.navbar-inverse .navbar-nav > li.c1 a {
color: #00A8FF;
}
.navbar-inverse .navbar-nav > li.c1 a:hover,
.navbar-inverse .navbar-nav > li.c1.active a {
color: #fff;
background: #00A8FF;
}
.dummy-div {
background: black;
height: 200px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dummy-div">
</div>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<!-- Button for smallest screens -->
<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" href="index.html">
<img src="assets/images/logo.png" alt="Techro HTML5 template"></a>-->
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right mainNav">
<li class="c1 active">Home
</li>
<li class="c1">Profile
</li>
<li class="c1">Games
</li>
<li class="c1">Top Players
</li>
<li class="c1">About
</li>
<li class="c1 dropdown">
Settings <b class="caret"></b>
<ul class="dropdown-menu">
<li><a data-toggle="modal" data-target='#change'>Change Password</a>
</li>
<li>Logout
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--MODAL-->
<?php include( "includes/changepass.php");?>
<!--END MODAL-->
</div>
<div style="height: 2000px;">
</div>
</div>
Since you're using BootStrap, please add the following class to your <nav> element:
navbar-fixed-top
Eg:
<nav class="navbar navbar-default navbar-fixed-top">
Have you tried adding position:fixed to the CSS for .navbar.navbar-inverse?
I am having a css issue as the width of the screen gets smaller will someone please tell me how to adjust my menu bar. I am using the google translate in my menu bar but the problem I am having is when the screen is full size and as you start moving the screen in to make it smaller the google translate starts to drop down to another level making all other dropdowns on the menu bar not work properly because google translate interferes.
Is there a way to make google translate button stay inline or on the menu bar without dropping to another row?
Or even making the width of the google translate not as wide to see if it will stay on the same line?
Any help would be greatly appreciated!
http://jsfiddle.net/bobrierton/5c1vbo2s/11/
.goog-te-gadget .goog-te-combo {
margin: 0px 0px;
}
.goog-logo-link {
display:none !important;
}
.goog-te-gadget{
color: transparent !important;
font-size:0px;
}
.goog-te-combo {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #687074;
text-transform: uppercase;
cursor:pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!--=== Header v4 ===-->
<div class="header-v4">
<!-- Navbar -->
<div class="navbar navbar-default mega-menu" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="row">
<div class="col-md-7">
<a class="navbar-brand" href="index.html">
<img id="logo-header" src="assets/img/logo-header.png" alt="Logo">
<img id="logo-header" src="assets/img/logo-text.png" alt="Logo text">
</a>
</div>
<div class="col-md-5 header-right">
<div class="social margin-bottom-10">
<ul class="header-links list-inline">
<li>Apple Store</li>
<li>Google Play</li>
</ul>
<ul class="social-icons social-icons-color">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<button class="btn-u btn-u-lg" type="button"><i class="fa fa-cc-mastercard"></i> Pay Online</button>
<button class="btn-u btn-u-red btn-u-lg" type="button"><i class="fa fa-calendar"></i> Make An Appointment</button>
</div>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="full-width-menu">Menu Bar</span>
<span class="icon-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</button>
</div>
</div>
<div class="clearfix"></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="container">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="active">
<a href="index.html" class="" data-toggle="">
Home
</a>
</li>
<!-- End Home -->
<!-- Driver License -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Driver License
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Online Services</li>
<li>Fees</li>
<li>Forms</li>
</ul>
</li>
<!-- End Pages -->
<!-- Motor Vehicles -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Motor Vehicle
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Online Services</li>
<li>Sales Tax</li>
<li>Fees</li>
<li>Forms</li>
<li>Title By Mail</li>
</ul>
</li>
<!-- End -->
<!-- Features -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Property Tax
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Lookup/Pay Online</li>
<li>Tax Certificates</li>
<li>Discount Periods</li>
<li>Instalment Options</li>
<li>Forms</li>
</ul>
</li>
<!-- End Features -->
<!-- TDT -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Tourist Tax
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Pay Online</li>
<li>Online Account Management</li>
<li>Collection Reports</li>
</ul>
</li>
<!-- Ens -->
<!-- Additional Services -->
<li class="dropdown">
<a href="full-width-page.html" class="dropdown-toggle" data-toggle="dropdown">
Additional Services
</a>
<ul class="dropdown-menu">
<li class="">Parking Permits</li>
<li>Hunting & Fishing</li>
</ul>
</li>
<!-- End -->
<!-- Contacts -->
<li class="">
<a href="contact.html" class="">
Contact Us
</a>
</li>
<!-- End Contacts -->
</ul>
<!-- Nav Bar Right Block -->
<ul class="nav navbar-nav navbar-border-bottom navbar-right">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</ul>
<!-- End Nav Bar Right Block -->
</div><!--/end container-->
</div><!--/navbar-collapse-->
</div>
<!-- End Navbar -->
</div>
<!--=== End Header v4 ===-->
You can use white-space: nowrap BUT you will need to make sure that it fits in the different break points because, as you requested, it will no longer wrap to fit.
.header-links {
white-space: nowrap;
}
After adding this, simply use your media queries to make adjustments through your different breakpoints to get the look/style you desire. An example of using a media query that makes style adjustments UNDER 860px screen width would be:
#media only screen and (max-width: 859px) {
.header-links li {
padding-right: 2px;
padding-left: 2px;
}
.header-links a {
font-size: 13px;
}
}