Twitter bootstrap mobile navigation - html

I am in charge of getting the mobile navigation on the site to work as intended but I have come into a bit of a problem.
This is a link to my code, the thing is that it looks how I want it too and the functionality is kind of there what I want it to do is when it drops down that the navigation bar takes up 100% of the screen rather than activating the scroll bar.
I have already tried using the code: overflow: hidden; and overflow-y: hidden; Neither of these have worked. if the link has expired some code is provided below.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Session Timeout</h4>
</div>
<div class="modal-body">
<p>
<label>Your session has not been refreshed for 20 minutes, you will be logged out after 30 seconds. If you wish to continue working click the button below.</label>
</p>
</div>
<div class="modal-footer">
<asp:button class="btn btn-default" id="Button1" data-dismiss="modal" onclientclick="stopTimer('<%= FinalTimer.ClientID %>')" text="Continue Working" runat="server">
</asp:button></div>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<div id="MainMenu">
<div class="list-group panel">
<a class="list-group-item list-group-item-success" href="#demo3" data-toggle="collapse" data-parent="#MainMenu">Admin</a>
<div class="collapse" id="demo3">
<a class="list-group-item1" href="#SubMenu1" data-toggle="collapse" data-parent="#SubMenu1">Placements<i class="fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="SubMenu1">
<a class="list-group-item2" href="#" data-parent="#SubMenu1">New placement</a>
<a class="list-group-item2" href="#" data-parent="#SubMenu1">End Placement</a>
<a class="list-group-item2" href="#" data-parent="#SubMenu1">New Referal</a>
<a class="list-group-item2" href="#" data-parent="#SubMenu1">End Referal</a>
</div>
<a class="list-group-item1" href="#SubMenu2" data-toggle="collapse" data-parent="#SubMenu2">Appliences<i class="fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="SubMenu2">
<a class="list-group-item2" href="#" data-parent="#SubMenu2">Fridge</a>
<a class="list-group-item2" href="#" data-parent="#SubMenu2">Freezer</a>
</div>
<a class="list-group-item1" href="javascript:;">Backgrounds</a>
</div>
<a class="list-group-item list-group-item-success" href="#demo4" data-toggle="collapse" data-parent="#MainMenu">Item 4</a>
<div class="collapse" id="demo4">
<a class="list-group-item1" href="">Subitem 1</a>
<a class="list-group-item1" href="">Subitem 2</a>
<a class="list-group-item1" href="">Subitem 3</a>
</div>
</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<asp:loginview runat="server" viewstatemode="Disabled">
<anonymoustemplate>
<ul class="nav navbar-nav navbar-right">
<li>Log in</li>
</ul>
</anonymoustemplate>
<loggedintemplate>
<ul class="nav navbar-nav navbar-right">
<li>
<asp:loginstatus runat="server" onloggingout="Unnamed_LoggingOut" logoutpageurl="~/" logouttext="Log off" logoutaction="Redirect">
</asp:loginstatus></li>
</ul>
</loggedintemplate>
</asp:loginview>
</li>
</ul>
</div>
</nav>
</div>
.navbar {
position: relative;
min-height: 50px;
border: 1px solid transparent;
overflow-x:hidden;
overflow-y:hidden;
max-height:100%;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
any advice on this would be amazing.

If you open up developer tools (F12 in Chrome/IE) and take a look at the computed tab for that element while it is expanded, you will see it has a max-height set, which is what is causing the scroll bar. To remove this, and have the max-height as the full screen, add max-height of 100vh to your CSS:
<div class="navbar-collapse collapse fullscreen-navbar-collapse">
.fullscreen-navbar-collapse {
max-height: 100vh;
}
If you only want it to this on smaller devices, wrap the CSS in a media query:
#media (max-width: 767px) {
.fullscreen-navbar-collapse {
max-height: 100vh;
}
}

Related

Mobile responsive dropdown not moving content properly?

I used bootstrap header,when it collapse changed to dropdown it moves the below content down, the image moves properly but the text on the image not moving down properly
Image moves down on dropdown but the text remains constant,i need to overlay or move the content down
my html code is:
<nav class="navbar navbar-inverse">
<div class="container-fluid" id="container">
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar" style="background: black !important;"></span>
<span class="icon-bar" style="background: black !important;"></span>
<span class="icon-bar" style="background: black !important;"></span>
</button>
<img src="./assets/logo.png" class="logo" >
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>About</li>
<li class="dropdown">
<a class="dropdown-toggle head-link" data-toggle="dropdown" href="#">Academic <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="head-link" href="#">Page 1-1</a></li>
<li><a class="head-link" href="#">Page 1-2</a></li>
<li><a class="head-link" href="#">Page 1-3</a></li>
</ul>
</li>
<li><a class="head-link" href="#">Locations</a></li>
<li><a class="head-link" href="#">Solutions</a></li>
<li><a class="head-link" href="#">Resources</a></li>
<button class="sigin-btn">Signup</button>
</ul>
</div>
</div>
</nav>
<div class="container">
<img src="./assets/Banner.jpg" class="banner">
<span class="cont-line1">Out of focus-</span>
<span class="cont-line2">Achieve with us</span>
</div>
Put this custom css on you .dropdown-item
If u already have some properties , You can manage it
.dropdown-item {
display: block;
max-width: 100%;
padding:0;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
And Add this css on your css file
.navbar-collapse {
max-height: calc(100vh - 60px);
overflow-y: auto;
}
Then it will be fine ...
Hope this works for you

Change the position of a button to up

I have a header with a logo a dropdown menu and a search bar the problem is that dropdown button it's down and I want it to up.
I have this way:
But I want something like this where button is align with the logo and search bar:
I have tried a lot of things like call the class of button in css and put margin-button with a lot of pxls but its work, any suggestion?
This is my code HTMl where I have the button:
<header>
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<a class="navbar-left" href="#"><img src="assets/img/logo-01.png" style="max-width:70px"/></a>
<div class="navbar-header navbar-left">
<button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<div class="cd-dropdown-wrapper">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle cd-dropdown-trigger">Categorias</button>
<nav class="cd-dropdown">
Close
<ul class="cd-dropdown-content">
<li class="has-children">
Eletrodomésticos
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back">Menu</li>
<li class="see-all">Todos os eletrodomésticos</li>
<li class="has-children">
Eletrodomésticos
<ul class="is-hidden">
<li class="go-back">Eletrodomésticos</li>
<li class="see-all">Todos os eletrodomésticos</li>
<!--<li class="has-children">-->
<li>Grandes Eletro de cozinha</li>
....<!--(has other categories but it doesnt matter for here so I skip that part)-->
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Pesquisar Produto">
</div>
<button type="submit" class="btn btn-danger">
<i class="glyphicon glyphicon-search"></i>
</button>
</form>
</div>
</div>
</div>
</nav>
</header>
This is my css code:
.btn-default {
margin-bottom: 350px;
background: #25727D;
border-color: #25727D;
position: absolute;
margin-left: 50px;
}
.btn-default {
margin-bottom:350px;
background: #25727D;
border-color: #25727D;
position:absolute;
margin-left:50px;
}
Since .btn-default already have position:absolute, just change top:10px or top:desiredValue accordingly to change vertical position of button.

height as parent and position inside navbar

I've modified for the third time, and now it looks clearer. Here is the link:
http://jsfiddle.net/3w2gdfqp/
html
<div id="navWrap">
<div class="mainContainer">
<nav class="navbar navbar-default">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav col-md-18">
<li class="active">HOME</li>
<li>OUR PHILOSOPHY</li>
<li>OFFERS</li>
<li>FINE WINE</li>
<li>CONTACT</li>
</ul>
<div class="searchBoxContainer col-md-5 pull-right">
<div id="searchOurWines" class="blackBox">
<span id="textSearchBox" class="textInBox">SEARCH OUR WINES</span>
<span id="iconSearchBox">
<span class="icon-icn-bottle"></span>
<a href=""><span id="arrowSearch" class="icon-icn-sort_down"></span>
<span id="arrowSearch2" class="icon-icn-sort_up"></span></a>
</span>
</div>
</div>
<div class="clearfix"></div>
</div><!--/.nav-collapse -->
</nav>
</div>
</div>
css
/*Navigation bar*/
#navbar{
padding:0;
}
.navbar{
border-radius:0;
min-height:40px;
}
.navbar.navbar-default{
border:0;
margin:0;
}
.navbar-nav > li > a {
padding-top:10px;
padding-bottom:10px;
}
#navWrap{
background-color:#808080;
}
#arrowSearch2{
display:none;
}
.searchBoxContainer{
border:1px solid pink;
}
as you see, the SEARCH OUR WINES, doesn't have the same height as the navigation bar, and I've tried everything I could!!
Any suggestions??
thanksss
See if the below one works :
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>OUR PHILOSOPHY</li>
<li>OFFERS</li>
<li>FINE WINE</li>
<li>TOUR & TASTE</li>
<li>CONTACT</li>
<li><div class="searchBoxContainer col-md-5 pull-right">
<div id="searchOurWines">
<div id="containerSearch" class="blackBox">
<span id="textSearchBox" class="textInBox">SEARCH OUR WINES</span>
<span id="iconSearchBox">
<span class="icon-icn-bottle"></span>
<a href=""><span id="arrowSearch" class="icon-icn-sort_down pull-right"></span>
<span id="arrowSearch2" class="icon-icn-sort_up pull-right"></span></a>
</span>
</div>
</div>
</div>
</li>
</ul>
and shift the search box at right side by css if it is not already

Bootstrap NavBar not aligned, especially in mobile view

My navbar seems to go out of whack. It's especially evident when I view the site on my mobile device, or just shrink my desktop window.
Below is a link to my site along with the code. I would love for my name to fit between my projects tap on the left and my e-mail and twitter icons on the right. Thank you for your help and time.
http://jocatcreative.com/
(trying to get past stack socials 2 link limit...
imugr dot com/0s4iJyr
imgur dot com/vqjiyEd)
(Edited to include screenshots)
<div class="navbar navbar-default">
<div class="container">
<div class="Heading Tag" align="center"><h2>Jovan S Hernandez</h2></div>
<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>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Projects <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>JoCat Creative Media</li>
<li>Gesaffelstein Landing</li>
<li>Monthly Resolutions</li>
<li class="divider"></li>
<li>Home</li>
<li class="divider"></li>
</ul>
</li>
</ul>
<ul class="pull-right">
<i class="fa fa-envelope-o"></i> Email Me
<i class="fa fa-twitter"></i> Twitter
</ul>
</div><!-- .container -->
</div><!-- .navbar -->
DEMO: https://jsbin.com/qufelu/1/
https://jsbin.com/qufelu/1/edit?html,css,output
You were using some incorrect classes, missing tags (on the right aligned stuff), unclosed tag (collapse), and were using an outdated attribute from ancient history ( align="center") Also, you don't need to wrap the name inside a div.
CSS
.custom-navbar {
background: transparent;
border: 0px;
}
#media (max-width:767px) {
.custom-navbar .name {
font-size: 20px;
float: left;
margin: 0;
padding: 15px 0 15px 15px;
}
.custom-navbar .navbar-toggle {
margin: 10px 15px 0 0;
float: right;
}
}
#media (min-width:768px) {
.custom-navbar .navbar-header {
width: 100%;
margin: 0;
}
.custom-navbar .name {
text-align: center;
float: none;
}
}
HTML:
<div class="navbar navbar-default custom-navbar">
<div class="container-fluid">
<div class="navbar-header">
<h2 class="name">Jovan S Hernandez</h2>
<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" id="navbar-collapse">
<ul class="navbar-right nav navbar-nav">
<li><i class="fa fa-envelope-o"></i> Email Me</li>
<li><i class="fa fa-twitter"></i> Twitter</li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Projects <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>JoCat Creative Media</li>
<li>Gesaffelstein Landing</li>
<li>Monthly Resolutions</li>
<li class="divider"></li>
<li>Home</li>
<li class="divider"></li>
</ul>
</li>
</ul>
</div>
<!-- .navbar-collapse -->
</div>
<!-- .container -->
</div>
<!-- .navbar -->

Remove additional space between image and div

How can I remove the additional space between the nav banner and the main banner image below it?
I removed the padding and margin, but nothing is working.
My code is below.
I don't want to set positions. Can anyone tell me what the problem is?
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" style="padding-top: 0px;">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav">
<li class="active">Product</li>
<li>Solutions</li>
<li>Services</li>
<li class="iphonePartnerLink">Partners</li>
<li class="iphoneContactLink">Contact</li>
</ul>
<ul class="nav" id="navSecond">
<li class="">Partners</li>
<li>Contact</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<header class="hero-unit-product">
<h1>
Defie Cloud Business Solutions
<small>.. changing the way businesses operate.</small>
</h1>
<p><a class="btn btn-green btn-large" href="/signup/" data-link="modal" data-target="#signup-modal">Register</a></p>
</header>
</div>
The space is coming from:
.home article.container {
margin-top: 30px;
}
Change it to:
.home article.container {
margin-top: 0;
}
The main problem is connected with <article class="container"> element - it has margin-top: 30px;.
You also have to change padding-top for .home selector. It's set to 55px now, but has to be 47px instead.