Hi when I resize the browser window in chrome/safari (not an issue in FF) the navbar transforms into hamburger menu, as I have coded for. But when I return to desktop size, the menu elements have fallen outside the navbar.
Here is the header section of my code:
<!-- ******HEADER****** -->
<header id="header" class="header">
<div class="container">
<img src="assets/images/figures/logo.png">
<nav class="main-nav navbar-right" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" 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><!--//nav-toggle-->
</div><!--//navbar-header-->
<div id="navbar-collapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active nav-item"><i class="fa fa-home"> Home</i></li>
<li class="nav-item"><i class="fa fa-question"> Who</i></li>
<li class="nav-item"><i class="fa fa-area-chart"> What</i></li>
<li class="nav-item"><i class="fa fa-location-arrow"> Where</i></li>
<li class="nav-item"><i class="fa fa-ticket"> Tickets</i></li>
<!-- <li class="nav-item dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">Info <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li class="nav-item"><i class="fa fa-location-arrow"> Mission Statement</i></li>
<li class="nav-item"><i class="fa fa-ticket"> Press</i></li>
</ul> -->
</ul>
<!--//nav-->
</div><!--//navabr-collapse-->
</nav><!--//main-nav-->
</div><!--//container-->
</header><!--//header-->
And my styles.css can be seen here: http://178.62.123.221/styles.css
Can anyone advise how I may fix this issue?
Thanks in advance.
Try adding your logo wrapper a proper float, so it doesn't interfere the way your navigation is positioned:
(better add a class to it, but) for now:
#header > .container > a{
float: left;
}
Related
I found a code from
http://usebootstrap.com/theme/facebook
But in this code, I want to make 'Home icon' never be collapsed at any browser size.
CODE:
<div class="navbar navbar-blue navbar-static-top">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
b
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
###▽▽▽ I want this icon remain on the navbar, not in collapsed dropdown menu
<i class="glyphicon glyphicon-home"></i>
###△△△ I want this icon remain on the navbar, not in collapsed dropdown menu
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="glyphicon glyphicon-user"></i>
<ul class="dropdown-menu">
<li>More</li>
<li>More</li>
<li>More</li>
</ul>
</li>
</ul>
</nav>
</div>
Bootply: https://www.bootply.com/lEfd188zDg
I tried to move <i class="glyphicon glyphicon-home"></i> to after b, but it looks very ugly.
I want that 'Home icon' is still seen in smaller browser size, being looks nicely not ugly. How can i modify well?
EDIT
Pic:
This simplified code is a little different from above code that i posted firstly.
Simplified code:
<div class="wrapper">
<div class="box">
<div class="row row-offcanvas row-offcanvas-left">
<div class="column col-sm-12 col-xs-12" id="main">
<!-- top nav -->
<div class="navbar navbar-blue navbar-static-top">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="glyphicon glyphicon-user"></i>
<ul class="dropdown-menu">
<li>More</li>
<li>More</li>
</ul>
</li>
</ul>
</nav>
<!-- /top nav -->
</div>
</div>
</div>
</div>
</div>
original result is like:
and in narrow browser,
But purpose result is like:
Would give me the way how to make this?
I just updated your HTML code and added CSS. Just replace it with yours. Please Only tap nav.
<style>
.heading-icons li{
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
}
</style>
<div class="navbar navbar-blue navbar-static-top">
<div class="col-xs-6 col-sm-6">
<ul class="list-inline heading-icons">
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
</ul>
</div>
<div class="navbar-header col-xs-6 col-sm-6">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
class="glyphicon glyphicon-user"></i></a>
<ul class="dropdown-menu">
<li>More</li>
<li>More</li>
</ul>
</li>
</ul>
</nav>
<!-- /top nav -->
</div>
If I put the browser on half screen (windows button + left or right) the top menu items are unreadable and also if I zoom in the top menu are not visible.
Please below html and Css code I guess which is having issue
<div><nav class="navbar-inverse" ng-class="::{'navbar':!isViewNative, 'is-native': isViewNative}"
role="navigation">
<div ng-show="::!isViewNative" class="navbar-header">
<a class="navbar-brand" ng-if="::!portal.logo" href="?id={{::portal.homepage_dv}}"><span>{{::portal.title}}</span></a>
<a class="navbar-brand navbar-brand-logo" ng-if="::portal.logo" href="?id={{::portal.homepage_dv}}">
<img ng-src="{{::portal.logo}}" />
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sp-nav-bar">
<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 sp-navbar-toggle="" class="collapse navbar-collapse navbar-right" id="sp-nav-bar">
<!-- Include The Menu -->
<sp-widget widget="data.menu"></sp-widget>
<ul ng-if="::(!user.logged_in && page.id != portal.login_page_dv && !data.hasLogin)" class="nav navbar-nav">
<li><a href ng-click="openLogin()">${Login}</a></li>
</ul>
<ul ng-if="::user.logged_in" class="nav navbar-nav">
<!-- chat, avatar, and logout -->
<li class="dropdown hidden-xs">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<span class="visible-lg-inline">${Useful Links}</span>
</a>
<ul class="dropdown-menu">
<li><a ng-href="?id=ess_page_vtb">${Visual Task Boards}</a></li>
<li><a ng-href="?id=reports">${Reports}</a></li>
<li>${Support Portal}</li>
</ul>
</li>
<li ng-if="::data.connect_support_queue_id"><a href ng-click="openPopUp()">${Live Chat}</a></li>
<li><sp-widget widget="data.languageSelector"></sp-widget></li>
<li class="dropdown hidden-xs">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<span class="navbar-avatar"><sn-avatar class="avatar-small-medium" primary="userID" /></span>
<span class="visible-lg-inline">{{::user.name}}</span>
</a>
<ul class="dropdown-menu">
<li><a ng-href="?id=user_profile&sys_id={{::user.sys_id}}">${Profile}</a></li>
<li>${Logout}</li>
</ul>
</li>
<li class="visible-xs-block"><a ng-href="?id=user_profile&sys_id={{::user.sys_id}}"><span class="navbar-avatar"><sn-avatar class="avatar-small-medium" primary="userID" /></span>{{::user.name}}</a></li>
<li class="visible-xs-block">${Logout}</li>
</ul>
</div>
enter code here
I'm trying to make a menu for smartphones & tablets, but when I create it, it always overflows the content of my website.
The effect I want to achieve is the same as the Twitter Bootstrap website — When you open it with smartphones, you can press the button and the menu rolls down and pulls the content of the website.
Here is my code:
<div class="dropdown">
<button class="navbar-toggle hidden-lg collapsed" data-toggle="dropdown" data-target="navbar-header" type="button">
<span class="glyphicon glyphicon-collapse-down">
</span>
</button>
<div class="col-xs-12 dropdown-menu navbar-inverse" role="menu">
<a class ="divider" href="#">Accueil</a><br />
<a class ="divider" href="#">Centres d'Interets</a><br />
<a class ="divider" href="#">CV</a><br />
<a class ="divider" href="#">Contact</a><br />
</div>
</div>
You can use the example from the documentation as a start:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
...
</div>
</nav>
You can find it here.
Try the below code. Courtesy: http://bootswatch.com Adjust the menu according to your requirements
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Download <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
In the above code,
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Gives the desired effect when the window size changes in browser or on small screens (Mobiles and tabs).
I have an issue where the Bootstrap 3 navbar when it is converted into a dropdown menu on small devices (see code below). The issue is that once a menu link has been selected, the navbar dropdown doesn't close.
Any pointers where to start looking greatly appreciated.
<nav id="y-navbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#"><img class="y-logo" src="images/template-logo.png" alt="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a class="y-nav-link" data-partial="home.html" href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a id="y-nav-about" class="y-nav-link" data-partial="about.html" href="#">About</a></li>
<li><a class="y-nav-link" data-partial="contact-us.html" href="#">Contact</a></li>
<li><a class="y-nav-link" data-partial="map.html" href="#">Directions</a></li>
<!-- Page Layouts -->
<li class="dropdown">
Layouts <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a class="y-nav-link" data-partial="feature-boxes.html" href="#"><i class="fa fa-file-code-o"></i> Feature Boxes</a></li>
<li><a class="y-nav-link" data-partial="four-blocks.html" href="#"><i class="fa fa-file-code-o"></i> Four Blocks</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
You can add in a script to let the menu close after click:
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});
See it working here: jsFiddle
Reference here
I am having issue with using bootstrap navbar with an image logo that overflows on the navbar. The issue is on the collapsed menu when opened on the iPhone. It looks something like this:
Here's the link to my site. Here's how I handle the image logo on the navbar:
<div class="navbar navbar-default navbar-fixed-top brandon-grotesque-bold">
<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>
<a class="navbar-brand nav-title-logo" href="http://test.com/"> </a>
</div>
<div class="navbar-collapse in" id="navbar-collapse" style="height: auto;">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/tentang-kami">
Apaan sih ni?
</a>
</li>
<li>
<a href="/cara-bergabung">
Mau gabung?
</a>
</li>
<li>
<a href="/faq">
Faq
</a>
</li><li>
<a href="/contact">
Contact Us
</a>
</li>
</ul>
<ul id="registerCart" class="nav navbar-nav navbar-right">
<li>
Register
</li>
<li class="divider-vertical"></li>
<li>
Login
</li>
</ul>
</div>
</div>
I am using a background image for the logo. Any ideas on how to fix this? It seems that when I remove: webkit-box-sizing: border-box; from bootstrap it works just fine. I am not sure if this is the way to go.
What about adding something like
.navbar-collapse {
min-width: 100px;
}