I have this issue when the viewport switches to a mobile version
using bootstrap v3
when the navbar switches to the mobile version of itself , the 2nd and the 3rd element come on the same line , because they have a dropdown class under them.
as shown in the picture. img1 img2
if the drowpdown class isnt put then the elements show themselves properly
any help here?
<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" href="index.html">
<img class="img-responsive" src="images/logo/logo.png" alt="Deccan Airsports Logo">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll">
Home
</li>
<li class="scroll dropdown">
Hot Air Balloon <span class="caret hidden-sm hidden-xs"> </span>
<div class="dropdown-content hidden-sm hidden-xs">
Book A Ride
Membership
FAQs
</div>
</li>
<li class="scroll dropdown">
Services<span class="caret hidden-sm hidden-xs"></span>
<div class="dropdown-content hidden-sm hidden-xs">
Gliders
Sky-Diving
Drones
Hang-Gliders
</div>
</li>
<li class="scroll">Contact</li>
<li><a class="scroll" href="about.html">About</a></li>
<li><a class="scroll" href="faq.html">FAQs</a></li>
<li class="scroll dropdown">Events<span class="caret "></span>
<div class="dropdown-content hidden-sm hidden-xs">
News & Press
Branding
Advertisement
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
The issue might be with your "dropdown" class - make sure it doesn't have display:inline.
Related
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 have a navbar that features a search bar and then the hamburger menu next to each other. Im having trouble keeping these elements centered. when I switch between different mobile screen sizes the element position changes
here is the html:
<div class="col-xs-12" id="mobile-search">
<div class="search-area">
<ul class="search-bar" id="mobile-go">
<li> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</li>
<li class="search-wrapper no-wrap">
<div class="no-wrap search-box" id="mobile-center">
##SEARCHBOX[autocomplete=true]##
</div>
</li>
</ul>
</div>
</div>
</div>
I want the ul elements to always be centered but adding the col centered class did nothing. What else should I be trying?
edit: Full code for header file:
<ac:pagelayout id="HeaderPage">
<div class="LayoutTopTop">
<div class="row">
<div class="col-sm-12 hidden-xs">
<ac:widgetarea id="HeaderBar"><ac:widget id="HTML3742" type="HTML"><div class="top-bar">
<ac:if setting="Show Phone Number in Header">
<div class="top-bar-info"><strong>##STOREPHONE##</strong></div>
</ac:if>
<ac:if setting="Show Email Address in Header">
<div class="top-bar-info"><strong> <a class="inherit no-ul color-inherit" href="mailto:##STOREEMAIL##">##STOREEMAIL##</a></strong></div>
</ac:if>
</div></ac:widget>
</ac:widgetarea>
</div>
</div>
<div class="row top-header">
<div class="col-sm-7 contentCentered hidden-xs ">
<ac:widgetarea id="UtilNavArea"><ac:widget id="HTML3744" type="HTML">
<a href="/">
<img src="/images/Header-images/Hitech-logo.png" class="main-logo img-responsive" alt="HiTech ">
</a>
</ac:widget>
</ac:widgetarea>
</div>
<div class="col-sm-4 col-sm-push-1 hidden-xs ">
<ul class="header-nav nav navbar-nav ">
<ac:if setting="Show Search as Dropdown">
<li><a href="#" data-toggle="dropdown">
<i class="icon-search"></i>
<span class="visible-xs visible-lg">Search</span>
</a>
<ul class="dropdown-menu">
<li>
<div class="panel-body no-wrap search-box" id="nav-search">
##SEARCHBOX[autocomplete=true]##
</div>
</li>
</ul>
</li>
</ac:if>
<li>
<ac:if setting="Show Customer Login as Dropdown">
<a href="#" data-toggle="dropdown">
<i class="icon-user"></i>
<span class="visible-xs visible-lg">##IF[LoggedIn]## My Account ##ELSE## Login ##ENDIF##</span>
</a>
<ul class="dropdown-menu">
$$CUSTOMERLOGIN3739$$
</ul>
<ac:else>
<a href="/store/myaccount.aspx">
<i class="icon-user"></i>
<span class="visible-xs visible-lg">##IF[LoggedIn]## My Account ##ELSE## Login ##ENDIF##</span>
</a>
</ac:else>
</ac:if>
</li>
<li class="no-wrap">
<ac:if setting="Show Shopping Cart as Dropdown">
<a href="#" data-toggle="dropdown">
<div class="in-block"><i class="icon-shopping-cart"></i></div>
<span class="visible-xs visible-lg">Shopping Cart</span>
##IF[CartIsEmpty]## ##ELSE##
<span class="badge">##CARTITEMSCOUNT##</span>
##ENDIF##
</a>
<ul class="dropdown-menu">
<li>
##IF[CartIsEmpty]##
<p class="m-20">Your cart is empty!</p>
##ENDIF##
$$SMALLSHOPPINGCART3740$$
</li>
</ul>
<ac:else>
<a href="/store/shopcart.aspx" rel="nofollow">
<div class="in-block"><i class="icon-shopping-cart"></i></div>
<span class="visible-xs visible-lg">Shopping Cart</span>
##IF[CartIsEmpty]## ##ELSE##
<span class="badge">##CARTITEMSCOUNT##</span>
##ENDIF##
</a>
</ac:else>
</ac:if>
</li>
</ul></div> <!-- just added-->
</div>
<ac:widgetarea id="TopHeaderWidgets"><ac:widget id="MENUBAR3738" type="MenuBar" linkgroupid="1">
<ac:visibilityarea id="dvControl">
$$ADMINHELP$$<div id="little">
<header class="top"></header>
<div id="nav">
<div>
<img src="/images/Header-images/Hitech-logo.png" class="main-logo img-responsive" alt="HiTech " id="top-logo">
</div>
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation" data-spy="affix" data-offset-top="60">
<div class="navbar-header">
<div class="col-xs-12" id="mobile-search">
<div class="search-area">
<ul class="search-bar" id="mobile-go">
<li> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</li>
<li class="search-wrapper no-wrap">
<div class="no-wrap search-box" id="mobile-center">
##SEARCHBOX[autocomplete=true]##
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
</div><!--end of mobile-->
Try to wrap your ul elements or whatever content you want to centre inside div with container class.
<div class="container">
Put Content Here
</div>
I've just installed bootstrap 3 but the collapsing menu doesn't work;
The menu looks fine in a desktop screen but scaling the hole thing down the menu button doesn't show up..
Here is the code for the menu:
<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
<div class="container">
<a class="btn btn-navbar" 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="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
<div id=".nav-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Inloggen <span class="sr-only">(current)</span></li>
<li>Contact</li>
<li class="dropdown">
Taal <span class="caret"></span>
<ul class="dropdown-menu">
<li>Nederlands</li>
<li>English</li>
<li>German</li>
</ul>
</li>
<li class="dropdown">
Valuta<span class="caret"></span>
<ul class="dropdown-menu">
<li>Euro</li>
<li>Dollar</li>
<li>Pond</li>
</ul>
</li>
</ul>
</div>
</div>
</div><!--End container-->
</div><!--End fixedtop-->
Assuming that you've put the jquery library , and after you've put the js file of bootstrap , I can think that the problem is with the data-target.
You're targeting the element with the id "nav-collapse", and you have ".nav-collapse" as id, so you need to take off that dot.
<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
<div class="container">
<a class="btn btn-navbar" 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="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
<div id="nav-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Inloggen <span class="sr-only">(current)</span></li>
<li>Contact</li>
<li class="dropdown">
Taal <span class="caret"></span>
<ul class="dropdown-menu">
<li>Nederlands</li>
<li>English</li>
<li>German</li>
</ul>
</li>
<li class="dropdown">
Valuta<span class="caret"></span>
<ul class="dropdown-menu">
<li>Euro</li>
<li>Dollar</li>
<li>Pond</li>
</ul>
</li>
</ul>
</div>
</div>
</div><!--End container-->
</div><!--End fixedtop-->
Here's a fiddle, and I changed some classes and some stuff to make the menu visible. Because if you didn't have the right CSS for it, it's pretty messed up like this.
And Note that you should always refer to the bootstrap docs , and try to stick to their methods to make your menu or anything else works perfectly fine.
And I saw that you've put the class "pull-right" for the menu , there's a class called "navbar-right" that works better that just pulling the menu to the right I think.
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 got a centered logo in my navbar and three menu categories on the side,when i reduce my resolution some categories start to disappear and when i reduce the resolution for navbar collapse things then get really messed up,the whole collapse menu is shown behind the main slider i have got.This is my code.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="height:90px;">
<div class="container-fluid">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="row">
<div class="col-md-4">
<ul class="nav navbar-nav ">
<li class="active menu-item">
<a class="menu-link" href="#">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">About us</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Events</a>
</li>
</ul>
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/Night-club.png" title="Night-club logo" alt="Night-club logo">
</div>
<div class="col-md-4">
<ul class="nav navbar-nav ">
<li class="menu-item">
<a class="menu-link" href="#">Gallery</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Reservation</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="main-slider-simple">
<ul class="img-slider">
<li>
<img class="img-responsive" src="images/main-img.jpg" title="Night club " alt="Night club " />
</li>
<li>
<img class="img-responsive" src="images/main-img2.jpg" title="Night club " alt="Night club " />
</li>
<li>
<img class="img-responsive" src="images/main-img3.jpg" title="Night club " alt="Night club " />
</li>
</ul>
<!-- Glavni slider -->
</div>
And here is css for the menu links i have set up...
.menu-item{
margin-top:50px;
margin-left:30px;
margin-right:20px;
font-size:30px;
}
How can i accomplish normal responsivness?
Here is the jsfiddle that kinda explains my situation.
http://jsfiddle.net/cELuF/
I've changed the css for the div
.col-md-4
http://jsfiddle.net/cELuF/2/
You will be able to see what i've added in the CSS box.