I have a navbar in my website in which I am using Bootstrap's scrollSpy to keep track of the section I am viewing. Now I have decided to add drop down menu's to my navbar and added one which triggers on hover instead of the click.
I used the solution in this SO answer to achieve the drop down menu on hover. However, since I am using scrollspy, a click on the li item will take me to that section. However, after adding the drop down, clicking the li item does not take me to that section.
Also Since the hover trigger is disabled in responsive mode, clicking on the li item does not open the dropdown menu as well.
Now having scrollspy in responsive mode is not necessary since the menu is anyway going to be collapsed.
This is my navbar section :
<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="#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>
<a class="navbar-brand" href="">
<!-- <img class="img img-responsive" src="www/images/srs-logo.jpg" alt="SRS Constructions"> -->
SRS Constructions
</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="collapse">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>About</li>
<li class="dropdown">
About
<ul class="dropdown-menu">
<li>Founder</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>Services</li>
<li>Our Projects</li>
<li>Why Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
This is my css for my navbar:
#media (min-width: 767px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-brand > img {
width: 40%;
position: relative;
display: inline-block;
height: auto;
margin-left: 90px;
margin-top: -80px;
}
#footer {
color: #2e2e2e;
}
}
#media (min-width: 767px) {
#footer {
color: #ffffff;
}
}
.navbar-brand > img {
width: 30%;
position: relative;
display: inline-block;
height: auto;
margin-left: 50px;
margin-top: -15px;
}
The href in the dropdown menu li item is the one which causes the trouble. I want to maintain both scrollspy as well as on hover on normal screen width and only hover (which will be click) and not scrollspy in responsive mode (I don't mind if it works also).
Please tell me how I can achieve this since both seem to contradict each other on implementation.
EDIT:
The about li is the one which I am using to test the scrollspy and hover element:
<li>About</li>
<li class="dropdown">
About
<ul class="dropdown-menu">
<li>Founder</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
Clicking on the first about works - > it navigates to the about
section.
Clicking on the second about does not word -> scroll spy
does not work however the hover works.
I want to combine both the functionalities together.
The website can be viewed here (incase of on the fly editing)
Related
I'm having an issue where a banner image (the "Review Us" text and lines) is not centering correctly when trying to adjust the screen size. Here is a before and after of what my issue is. The after image is also showing the same results on mobile screens
before
after
The HTML for that image goes as followed:
<div class="rowBanner">
<img src="images/reviewus.png" alth="review">
</div>
The only CSS in effect is on
div.rowBanner{
padding-top: 40px;
text-align:center;
}
I would like the "Review Us" text part of the image to be centered (left-to-right) regardless of screen width
The problem you have might be from desktop to mobile the hambuger menu shift your logo. using position absolute with transform: translate(-50%, 0%); will center your img by its own width.
.rowBanner {
position: absolute;
left: 50%;
display: block;
transform: translate(-50%, 0%);
}
Centering Percentage Width/Height Elements
REF: https://css-tricks.com/centering-percentage-widthheight-elements/
.navbar {
position: relative;
}
.rowBanner {
position: absolute;
left: 50%;
display: block;
transform: translate(-50%, 0%);
}
<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>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="rowBanner">
<img src="http://via.placeholder.com/100x50" alth="review">
</div>
<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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Just add this css to the image:
div.rowBanner > img {
display: block;
margin: 0 auto;
max-width: 100vw;
}
Edited: Added a maximum with to the img, 100vw means 100 viewport width units, See: http://caniuse.com/#feat=viewport-units
You may try following CSS:
div.rowBanner {
margin-left:auto;
margin-right:auto;
width:80%;
}
What about using CCS background-image to set your image. You can then control where the center point is on different resolutions via background-position
function resize(isDesktop) {
if (isDesktop) {
$('.banner').css('width', '100%');
} else {
$('.banner').css('width', '200px');
}
}
.banner {
background-image: url('https://i.ytimg.com/vi/qh7LLydY8eo/maxresdefault.jpg');
background-size: cover;
background-position: center;
height: 175px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="resize(true)">Desktop</button>
<button onclick="resize()">Mobile</button>
<div class="page">
<div class="banner">
</div>
</div>
I've customized a basic Bootstrap navbar - that's about all I'm really using for a project, to not collapse when shrunk. However, whenever the menu is put into a smaller window, it seems to place the brand on top of the menu itself.
There will be enough space to not worry about this with the actual menu, so I'd like to figure out how to prevent it from doing this - here is the related script:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
And my applied CSS for it at the moment:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
.container-fluid {
width: 80%;
margin: auto;
}
Your <div class="navbar-header"> is a block, just move <a class="navbar-brand" href="#">Project</a> into navbar block.
.navbar-brand {
margin-top: 3px;
margin-right: 15px;
}
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li,
.navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right !important;
}
.container-fluid {
width: 90%;
margin: auto;
}
.navbar-brand {
margin-top: 2px;
margin-right: 15px;
}
<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>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div id="navbar" class="navbar-collapse collapse">
<a class="navbar-brand" href="#">Project</a>
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Fixed top</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
Add below markup just below of <div class="container-fluid"> in your html.
<a class="navbar-brand" href="#">Project</a>
Below is working fiddle for the same
Responsive navigation with bootstrap
I use nav and nav-bar in Bootstrap3.
<div id="gnav" class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<nav class="navbar navbar-default" id="" >
<div class="collapse navbar-collapse" id="">
<ul class="nav navbar-nav">
Can I prevent showing the hamburger menu on small device widths?
Instead of the menu, I want to show texts like home, items, contact and so on, like in the desktop view.
Here’s an example of the behaviour I do not want.
Try this:
Check Demo HERE
HTML:
<nav class="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only ">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.container-fluid -->
</nav>
CSS:
.nav::after,
.nav::before,
.navbar-header::after,
.navbar::after {
display: table-caption;
}
.nav.navbar-nav li,
.nav.navbar-nav li a {
display: inline-block;
}
.navbar-nav .open .dropdown-menu {
position: absolute;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}
On a theme based website, on its final third stage of collapse, it reduces the width of the logo.
However, they have removed all whitespace from their css making it extremely hard to read.
The problem for me is, the logo is just a bit too big (in width) when it collapses on the minimum width and the logo and the navbar don't sit together.
How would I fix this?
Reduce width on this page to see what I mean
Update: Using #joshhunt code, it now squashes the navbar and logo together
CSS (vanilla bootstrap except for):
#media (max-width: 480px) {
.navbar-brand {
max-width: 200px;
height: auto; /* So the image doesn't distort */
}
}
HTML page:
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.htm"><img src="logo.png" alt="SelectUKDeals"></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Active</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input class="form-control col-lg-8" placeholder="Search" type="text">
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
Update #2: So it went from going like this-
to this
Solution: I didn't add the class="logo" to the image :( It works perfectly now
Use a media query to change the max-width on the logo, for example:
#media (max-width: 480px) {
.logo {
max-width: 200px;
height: auto; /* So the image doesn't distort */
}
}
This would set a max-width of 200px on the "logo" class when the screen width is less or equal to 480px.
I use max-width just in case you change the image and it ends up being smaller or you the image container ends up being smaller and you want it to fit to that (using width: 100%;) but you could just use width and it would probably work just as well.
Update
To make navbar-brand go on a new line you just need to add clear: both (more info on clear) to it inside the media query. For example:
#media (max-width: 480px) {
.navbar-brand {
clear: both;
}
}
I have two navbar containers on my page.
Originally, navbar1 stays on top of navbar2, but after I shrink the page and the responsive style come to have effect, I need navbar2 to be on top of nabvar1
Here's a link to my demo: click
Here's an example of what I have:
Here's an example of what I need:
Update
CSS Code Snippet
.navbar
{
margin-bottom: 3px;
}
.btn-group
{
float: right;
}
/*****************************************************/
/*************** LEFT NAV CUSTOM STYLES **************/
/*****************************************************/
.navbar-inner-left
{
padding-right: 0;
padding-left: 0;
}
.navbar-left{}
.navbar-left .nav > li
{
float: none;
}
.navbar-inner-left div > .nav-list
{
padding-left: 0;
}
.navbar-inner-left .container-fluid > .brand
{
padding: 10px 5px 10px 5px;
}
.navbar-inner-left
{
border: none;
background-color: #ffffff;
background-image: -moz-linear-gradient(top,#ffffff,#ffffff);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#ffffff));
background-image: -webkit-linear-gradient(top,#ffffff,#ffffff);
background-image: -o-linear-gradient(top,#ffffff,#ffffff);
background-image: linear-gradient(to bottom,#ffffff,#ffffff);
border: none;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffffffff',GradientType=0);
-webkit-box-shadow: 0;
-moz-box-shadow: 0;
box-shadow: 0;
}
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
#media (min-width: 1200px){}
#media (min-width: 980px){}
#media (max-width: 979px){}
#media (max-width: 767px){}
#media (min-width: 768px) and (max-width: 979px)
{
.navbar-left .btn-navbar
{
margin-right: -15px;
}
.navbar-inner-left .container-fluid > .brand
{
float: left;
}
}
#media (max-width: 767px) and (min-width: 480px)
{
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a
{
padding-left: 30px;
}
.navbar-inner-left .container-fluid > .brand
{
padding-left: 30px;
}
.navbar-inner-left .nav-list > .nav-header
{
padding-left: 20px;
}
.navbar-left .btn-navbar
{
margin-right: 26px;
}
}
#media (max-width: 480px)
{
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a
{
padding-left: 30px;
}
.navbar-inner-left .container-fluid > .brand
{
padding-left: 30px;
}
.navbar-inner-left .nav-list > .nav-header
{
padding-left: 20px;
}
.navbar-left .btn-navbar
{
margin-right: 26px;
}
}
HTML Code Snippet
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<img alt="140x140" src="http://lorempixel.com/140/140/" />
<div class="navbar navbar-left">
<div class="navbar-inner navbar-inner-left">
<div class="container-fluid">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span></a>Main Menu
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav nav-list">
<li class="nav-header">List header </li>
<li>Home </li>
<li>Library </li>
<li>Applications </li>
<li class="nav-header">Another list header </li>
<li>Profile </li>
<li>Settings </li>
<li class="divider"></li>
<li>Help </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="span10">
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span></a>Title
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li class="nav-header">Nav header </li>
<li>Separated link </li>
<li>One more separated link </li>
</ul>
</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li class="nav-header">Nav header </li>
<li>Separated link </li>
<li>One more separated link </li>
</ul>
</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li class="nav-header">Nav header </li>
<li>Separated link </li>
<li>One more separated link </li>
</ul>
</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li class="nav-header">Nav header </li>
<li>Separated link </li>
<li>One more separated link </li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>Link </li>
<li class="divider-vertical"></li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li>Separated link </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="btn-group">
<button class="btn" type="button">
<em class="icon-align-left"></em>
</button>
<button class="btn" type="button">
<em class="icon-align-center"></em>
</button>
<button class="btn" type="button">
<em class="icon-align-right"></em>
</button>
<button class="btn" type="button">
<em class="icon-align-justify"></em>
</button>
</div>
</div>
</div>
</div>
Thanks in Advance!
.navbar-left {
position: relative;
top: 88px;
}
.navbar-inner {
position: relative;
top: -44px;
}
And put that in the media query block you want to swap them in.
Having looked at your code i would use jQuery. I'm on a mobile device and can not access your jsfiddle at the moment. But to move a div from one place to another you would just do this in jQuery
$("#source")
.appendTo("#destination");
EDITED
if ( $(window).width() < 959) {
$("#source")
.appendTo("#destination");
}