Trying to make my mobile navbar not coming out quite right. Anyone see the problem? I have only a couple months experience, need a quick hand of help. Much appreciated!
As you can see it doesnt display the navbar right at all. The contact page isnt clickable.Its missing the Services link
*******************
NAV MENU MOBILE
*******************
-->
<div class="menu-wrap mobile">
<div class="container">
<div class="row">
<div class="col-sm-3 no-padding">
<img src="img/logo.png" alt="logo" class="logo-menu">
</div>
<div class="col-sm-9 col-lg-7 col-lg-offset-2 no-padding">
<nav class="nav-menu">
<button class="menu-toggle">
<span class="icon"></span>
<span class="icon"></span>
<span class="icon"></span>
</button>
<ul class="main-menu">
<li class="menu-item active menu-item-has-children">
Home
</li>
<li class="menu-item menu-item-has-children">
<a>Hosting</a>
<ul class="sub-menu">
<li class="menu-item">Shared Hosting</li>
<li class="menu-item">Reseller Hosting</li>
<li class="menu-item">Cloud VPS</li>
<li class="menu-item">Dedicated Server</li>
</ul>
</li>
<li class="menu-item">
Domains
</li>
<li class="menu-item menu-item-has-children">
<a href="blog.html>Blog</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="services.html>Services</a>
</li>
<li class="menu-item menu-last">
<a class="menu-item" href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
navbar
<a href="services.html>Services</a>
should be
Services
You left out the second ".
In those two links...
<a href="blog.html>Blog</a>
<a href="services.html>Services</a>
...the closing quote of the hrefattribute is missing. Should be
Blog
Services
Related
I'm developing a web with Ruby on Rails, using Twitter-Bootstrap and Simple-Navigation gem. The navigation menu works fine on any browser, something like this:
When displaying the web on a mobile device and clicking the nav button, the whole menu is displayed on vertical block, enlarging the size of the header to a max. height than can hold the menu. The problem is that opening any submenú increases the size of the menu, overflowing and hiding the last options, as you can see in the comparison:
Any idea?
The code of nav_menu on the mobile version:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="brand">
<img alt="NRG Consulting logo" src="/assets/nrg-logo.png" title="NRG Consulting">
</div>
<span class="development" id="rails-env"><span>development</span></span>
<div class="container nav-collapse in collapse" style="height: 496px;">
<ul class="nav pull-right align-top">
<li>
<a href="manual_path">
Help
</a>
</li>
<li>
Español <img alt="Switch to English" class="lang" data-locale="en" src="/assets/lang-es.png" title="English">
</li>
</ul>
<ul class="nav pull-right align-bottom">
<li id="home">Home</li>
<li id="formulas">Formulas</li>
<li id="deals">Deals</li>
.
.
.
<li class="active dropdown" id="admin">
Admin <b class="caret"></b>
<ul class="dropdown-menu">
<li id="subscription">Subscriptions</li>
<li class="divider" id="nav_header"></li>
<li id="historic">Recalculate historic prices</li>
<li class="divider" id="nav_header"></li>
<li id="export">export data</li>
<li id="import_tuple_eod_check">Check data</li>
<li class="divider" id="nav_header"></li>
<li id="alerts">Alert</li>
<li id="product_price_alerts">Price alerts</li>
<li id="import_tuples">Import tuple</li>
<li id="fixing_errors">fixing errors</li>
<li class="divider" id="nav_header"></li><li id="redis">Resque</li>
<li id="copycopter">Translate</li>
<li class="divider" id="nav_header"></li>
<li class="active simple-navigation-active-leaf" id="client">Clients</li>
<li id="user">Users</li>
<li id="user_activities">User activity</li></ul></li>
<li id="user">Users</li>
</ul>
</div>
</div>
</div>
</div>
Collapsed nav menu appears to set a fixed height value when displaying nav menu, preventing the div to enlarging when submenu dropdowns display:
<div class="container nav-collapse in collapse" style="height: 496px;">
Adding this lines to style.css set height property to auto, allowing the div to enlarge when needed, showing the whole menu:
.container.nav-collapse.in.collapse{
height: auto !important;
}
Perhaps there is a cleaner solution, but this worked pretty fine for me, and don't want to change Bootstrap code itself.
A link displaying some usefull info about similar issues.
I have run into a bug with Bootstraps navbar-fixed-top with the iPhone 6+'s mobile safari in landscape on iOS 8. The bug only happens with other tabs open.
Here is how to replicate it:
1) Go to http://getbootstrap.com/examples/navbar-fixed-top/ on your iPhone 6+ in landscape – be sure you have one other tab open
2) Scroll down the page without opening the collapse
3) Once Safari's status bar (the url and tabs) goes away, open the navbar
4) Scroll back up so that Safari's status bar with tabs comes back up
5) Try to close the navbar.
I had this bug in iOS 7, but was able to fix it by adding the viewport minimal-ui meta. I have tested my iPhone 6+, and the 6+ iPhone simulator with the latest version of iOS 8. It appears the tabs are to blame since the regular iPhone 6 doesn't have this problem because the tabs do not show on the status bar. I would imagine this bug goes beyond just Bootstrap though, but applies to any fixed element on the top.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="to-sticky navbar-fixed-top">
<div class="nav-container">
<div class="navbar">
<div class="navbar-header">
<a type="button" class="navbar-toggle btn-secondary btn" data-toggle="collapse" data-target=".navbar-ex1-collapse">
Main Menu
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" role="menubar">
<!--unless submenu-->
<li class="active nav-home first-li ">
Home
</li>
<li class="nav-dot nav-home">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
About<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="">
Chair's Welcome
</li>
<li class="">
History
</li>
<li class="">
Campbell Hall
</li>
<li class="">
FAQs
</li>
<li class="">
Jobs & Fellowships
</li>
<li class="">
Integrity Statement
</li>
<li class="">
Contact
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
People<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="hidden-xs dropdown-submenu">
Faculty<b class="caret"></b>
</li>
<!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
<li class="visible-xs dropdown-submenu">
Faculty<b class="caret"></b>
<ul class="dropdown-menu sub-menu" role="menu">
<li class=" ">Current
</li>
<li class=" ">Emeriti
</li>
</ul>
</li>
<li class="">
Researchers
</li>
<li class="">
Postdocs
</li>
<li class="">
Visiting Scholars
</li>
<li class="hidden-xs dropdown-submenu">
Graduate Students<b class="caret"></b>
</li>
<!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
<li class="visible-xs dropdown-submenu">
Graduate Students<b class="caret"></b>
<ul class="dropdown-menu sub-menu" role="menu">
<li class="">Current
</li>
<li class="">Alumni
</li>
</ul>
</li>
<li class="">
Staff
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
News & Events<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="">
Department News
</li>
<li class="">
Department Events
</li>
<li class="">
Campus Calendar
</li>
<li class="">
Newsletters
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
Academic Programs<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="hidden-xs dropdown-submenu">
Undergraduate<b class="caret"></b>
</li>
<!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
<li class="visible-xs dropdown-submenu">
Undergraduate<b class="caret"></b>
<ul class="dropdown-menu sub-menu" role="menu">
<li class="">Undergraduate Overview
</li>
<li class="">Requirements of the Astrophysics Major
</li>
<li class="">Declaring the Major
</li>
<li class="">How to Apply
</li>
<li class="">Undergraduate Resources
</li>
<li class="">Undergraduate Student Learning Initiative
</li>
<li class="">Policy on Academic Misconduct
</li>
</ul>
</li>
<li class="hidden-xs dropdown-submenu">
Graduate<b class="caret"></b>
</li>
<!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
<li class="visible-xs dropdown-submenu">
Graduate<b class="caret"></b>
<ul class="dropdown-menu sub-menu" role="menu">
<li class="">Graduate Overview
</li>
<li class="">Degree Requirements
</li>
<li class="">How to Apply
</li>
<li class="">Graduate Resources
</li>
<li class="">Teaching Opportunities
</li>
<li class="">Student Services
</li>
</ul>
</li>
<li class="hidden-xs dropdown-submenu">
Courses<b class="caret"></b>
</li>
<!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
<li class="visible-xs dropdown-submenu">
Courses<b class="caret"></b>
<ul class="dropdown-menu sub-menu" role="menu">
<li class="
active 3">
<a href="/courses/undergraduate/2015/SU" role="menuitem">
Summer
2015
• Undergraduate
</a>
</li>
<li class="
">
<a href="/courses/undergraduate/2015/SP" role="menuitem">
Spring
2015
• Undergraduate
</a>
</li>
<li class="
active 3">
<a href="/courses/graduate/2015/SU" role="menuitem">
Summer
2015
• Graduate
</a>
</li>
<li class="
">
<a href="/courses/graduate/2015/SP" role="menuitem">
Spring
2015
• Graduate
</a>
</li>
</ul>
</li>
<li class="">
Financial Aid
</li>
<li class="">
Student Prizes and Awards
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
Prospective Students<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="">
Why Berkeley Astronomy
</li>
<li class="">
Tuition
</li>
<li class="">
UNEX and Summer Sessions
</li>
<li class="">
About Berkeley
</li>
<li class="">
Statement on Diversity
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
Research & Facilities<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="">
Facilities
</li>
<li class="">
Organized Research Units
</li>
<li class="">
Research Opportunities
</li>
<li class="">
Projects
</li>
<li class="">
Labs
</li>
<li class="">
Libraries
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
Department Resources<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="">
Forms and Documents
</li>
<li class="">
Computing at Berkeley Astronomy
</li>
<li class="">
Campus Shared Services
</li>
<li class="">
Access & Building
</li>
<li class="">
Hosting Speakers & Visitors
</li>
<li class="">
Building Procedures
</li>
<li class="">
Campus Resources
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown last-li">
Friends & Fans<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="">
Outreach
</li>
<li class="">
Make A Gift
</li>
<li class="">
Ask an Astronomer
</li>
<li class="">
Local Resources
</li>
<li class="">
Department Merchandise
</li>
</ul>
</li>
</ul>
<form action="/search" class="search_form visible-xs navbar-form navbar-right" method="post" role="search">
<div class="input-group">
<input class="form-control input-sm search_text" name="search_text" type="text" placeholder="">
<span class="input-group-btn">
<button type="submit" class="btn btn-color btn-sm"><span class="glyphicon glyphicon-search"></span><span class="sr-only">Search</span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
I have yet to find a work around. Any ideas?
If I understand correct this issue comes up whenever the landscape tabs are open. You will be unable to either open/or close the mobile menu.
I managed to fix it with a workaround:
Make an absolute positioned div(with id #ios_menu_fix in this case) about the size of the toggle button.
In css align it where the toggle button would be in the fixed nav menu. Make sure it has z-index set and also -webkit-transform: translate3d(0,0,0); to fix ios z-index issue when scrolling up.
Every time page is scrolled set the top to page scrolled height like so:
$(window).on('scroll',function() {
$("#ios_menu_fix").css("top", $(document).scrollTop()+"px");
});
Open/close the menu when #ios_menu_fix is clicked
$(".nav-collapse").collapse('hide');
$(".nav-collapse").collapse('show');
You can check if the menu is open like so:
var toggle = $(".nav-collapse").is(":visible");
if (toggle) {
$(".nav-collapse").collapse('hide');
}
else {
$(".nav-collapse").collapse('show');
}
Its an ugly solution but the only one I currently find working that doesn't break other mobile browsers and layouts.
These code examples use JQuery.
I am having a little problem with the navigation list items going a little below the top-bar when I resize the browser. When I remove the image it seems to be working perfectly fine on all screen resolutions but inserting the logo has had an affect on this. Is there any way I can solve this. Can't seem to find out what the problem is.
HTML:
<!-- HEADER START -->
<div id="header">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<a href="index.html"><img src="img/flogo.svg" class="logo" alt="Logo">
Sharp <span>Media </span>
</a>
</h1>
</li>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
<li>Home</li>
<ul class="dropdown">
</ul>
</li>
<li class="divider"></li>
<li>FAQs</li>
<li class="divider"></li>
<li class="has-dropdown">
<li>Contact Us</li>
<ul class="dropdown">
<li class="divider"></li>
</ul>
</li>
</ul>
</section>
</nav>
I am currently working with foundation 5 and ultimately trying to make my page mobile friendly. I have a top navigation bar that I have created for the page following some of the basic structures. The navigation bar has problems being responsive. It does not display a menu at a all when I resize smaller the screen. How can I get the navigation bar to be responsive?
HTML:
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon">
<span>Title</span>
</a>
</nav>
<nav class="top-bar docs-bar hide-for-small" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
Title
</h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown not-click">
<a class="" href="#">Test</a>
<ul class="dropdown">
<li>
SubTest
</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown not-click">
<a class="" href="#">Test2</a>
<ul class="dropdown">
<li>
SubTest2
</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown not-click">
<a class="" href="#">Test3</a>
<ul class="dropdown">
<li>
SubTest3
</li>
</ul>
</li>
</ul>
</section>
</nav>
You have given it the class .hide-for-small for the main one which holds all of the dropdowns.
Then the one that is viewable by mobile, you have no data inside of it.
Add the <a class="left-off-canvas-toggle menu-icon">
<span>Title</span>
</a> to the other nav.
Refer to this page here to get a proper responsive topbar.
I am having a issue with getting my bootstrap to work with a site I am designing for a friend.
<nav class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/" style="width: 240px;">
West Coast Refuse Trucks
</a>
<div class="nav-collapse">
<ul class="nav">
<li>
<a href="index.html" class="active">
Home
</a>
</li>
<li>
<li>
<a href="about.html">
About
</a>
</li>
<li>
<a href="firstgear.html">
First Gear
</a>
</li>
<li>
<a href="/play">
Uploads
</a>
</li>
<li>
<a href="/forums">
Refuse Community
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
I am not sure what is preventing it from highlighting in my page on my site. Home shows up as usual. Any help?
Assuming that you are using Bootstrap 2.3.2, you suppose to add active class to <li>, not to <a>.
<ul class="nav">
<li class="active">
Home
</li>
<!-- ... -->
</ul>
Demo: http://bootply.com/97634