My navbar-brand goes down when I resize my browser or either I use it on my low resolution mobile device.
Here's my jsfiddle
My NavBar Code:
<div class="navbar navbar-default" id="page">
<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.php"><img src="img/feueac-logo.png" style="position:absolute; width:30px; height:35px; top:7px; left:5px;" /><span style="padding-left:25px; padding-top:0px;" class="navbar-brand" >FEU - EAC E - Project System</span></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Client Application</li>
<li>About Us</li>
<li>Contact Us</li>
<li class="dropdown">
Login <b class="caret"></b>
<ul class="dropdown-menu">
<li id="modal_trigger" href="#modal" class="btn_red">Faculty</li>
<li id="modal_trigger2" href="#modal2" class="btn_red">Student</li>
<li class="divider"></li>
<li id="modal_trigger3" href="#modal3" class="btn_red">Guest</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<p style="padding-left:20px; padding-top:4px;">
<input type="text" class="form-control col-lg-8" placeholder="Search" style="width:300px; height:30px;">
</form>
</div>
</div>
Here's some examples:
Good:
Bad:
Worse:
I've had luck using FitText, a jQuery plugin that fits text to it's parent element.
From their website:
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
Not exactly an "answer" (which there may be none of for this question), but a decent solution.
Good luck!
Related
I have a navbar that does collapse as it should in mobile view but on the tablet (or ipad pro) there is a break or large padding/gap that breaks the navigation. The testing site is at:
padding or margin bottom occurs in tablet view
I have tried a number of things like adjusting the viewport and adding links to bootstraps transition.js and collapse.js files but that is not working either.
<!--navigation bar-->
<nav class="navbar navbar-default transparent navbar-static-top" role="navigation" id="navbar-main">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-lg-12"> <a class="navbar-brand" href="http://patskailua.com/index.php"><img src="http://patskailua.com/images/kailua-beach-properties-llc.png" alt="pats kailua hawaiian Flower" usemap="#Map" class="img-responsive">
</a></div>
</div>
</div>
</div>
</div>
<div class="navbar-header">
<div class="text-center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="fa fa-chevron-down"></span> Menu
</button>
<div class="collapse navbar-collapse" id="navCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active goleft1">vacation rentals</li>
<li>kailua activities</li>
<li class="dropdown">
rentals by size<span class="caret black"></span>
<ul class="dropdown-menu">
<li><a href="http://patskailua.com/wp/three-bedrooms.php" >Three Bedrooms</a></li>
<li>Two Bedrooms</li>
<li>One Bedrooms</li>
<li>Studios</li>
</ul>
</li><li>contact us </li>
<li>about us</li>
<li class="dropdown">
property management and sales<span class="caret black"></span>
<ul class="dropdown-menu">
<li>Property Management</li>
<li>Buying a Property</li>
<li>Selling a Property</li>
<li class="goleft">home</li>
</li>
</ul>
</div>
</nav>
<!--end nav bar-->
If anyone has any ideas on how to fix this, that would be great. Thanks so much. -Beth
You could try changing the class col-lg-12 by col-md-12 or even col-sm-12.
This should make your navbar adapt better smaller resolutions.
Here i am trying to generate full width responsive submenu for service li in my menu but i am not able to generate the full width responsive submenu.A example of full width submenu i am trying to generate is this.
And my current submenu for service by my code is show as :
Below is my code
<div class="main-nav">
<div class="container">
<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">
<h1><img class="img-responsive" src="images/logo.png" alt="logo"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll active">Home</li>
<li class="scroll dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Service <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li class="scroll">About Us</li>
<li class="scroll">Portfolio</li>
<li class="scroll">Team</li>
<li class="scroll">Blog</li>
<li class="scroll">Contact</li>
</ul>
</div>
</div>
</div>
Any help will be highly appreciated
I would have a look at it, but I'd need to see the CSS. I found the free template, but the it doesn't have a dropdown menu. So if I could see your CSS, I could get back to you and see what I can do! :)
~ Daniel
Ps I couldn't comment, rep is less than 50.
You can find full-width responsive menus here:
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
scroll down to see more.
You must use some framework, in this case it's bootstrap.
if you want to keep your code, provide us full-codesnippet or a jsfiddle link, otherwise seem that you want us to create all css/js over your html (and some people will offend and downvote your answer).
Hope it helps!
Working everywhere else except iPads, view port also added:
<meta name="viewport" content="width=device-width, initial-scale=1">
Please help me find a solution, see my website.
Here is how the result is viewed on iPhone.
Here is how the result is viewed on iPad.
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="top">
<div class="container topmenu">
<ul class="nav nav-pills pull-right" style="margin-top: -1px;">
<li role="presentation">Login
</li>
<li role="presentation">Register
</li>
<li role="presentation">
<a href="https://www.facebook.com/pages/allvideolecturescom/320909451432640" class="soc">
<img src="http://allvideolectures.com/img/facebook_top.png" alt="" />
</a>
</li>
<li role="presentation">
<a href="https://twitter.com/videolecture" class="soc">
<img src="http://allvideolectures.com/img/twitter_top.png" alt="" />
</a>
</li>
<li role="presentation">
<a href="https:/google.com/+Allvideolectures" class="soc">
<img src="http://allvideolectures.com/img/google_top.png" alt="" />
</a>
</li>
</ul>
</div>
</div>
<div class="container">
<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>
<a class="navbar-brand" href="http://allvideolectures.com/">
<img src="http://allvideolectures.com/img/logo.png" alt="all video lectures let's learn" /><span class="logoleft">ALLVIDEO</span><span class="logoright">LECTURES.COM</span>
</a>
</div>
<div id="navbar" class="navbar-collapse collapse mainmenu">
<ul class="nav navbar-nav pull-right">
<li role="presentation">Home
</li>
<li role="presentation" class="active">Courses
</li>
<li role="presentation">Blog
</li>
<li role="presentation">About
</li>
<li role="presentation">Contact us
</li>
<li role="presentation">
<form method="get" action="http://allvideolectures.com/search/">
<input type="text" name="search" class="form-control" required placeholder="Start Learning...">
<input type="submit" value="" class="searchbtn1">
</form>
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</nav>
First you should read documentation of the framework you're using:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
Your code works well, but using default variable value.
If you want collapsed navbar (and other components maybe too) on 768px, you should override your variables.less file with a larger value, for example with #screen-md-min (992px):
#grid-float-breakpoint: #screen-md-min;
For more information about Bootstrap variables overriding see this question.
My Bootstrap navbar links including search goes away whenever I resize the page anywhere less than about 600px. What would be the cause of this? Only the logo does not move. The navbar is fine and does not resize, so I was surprised that the links went away when the page resize. I do not want any of my links to move from where they are regardless of page resizing.
code is here: HTML
http://jsfiddle.net/Crisp3333/2u0tgh5r/
<div class="menubar">
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="yancii_logo.jpg" width="40px" height="50px">
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search events, places, contacts......" class="form-control">
</div>
</form>
<ul class="nav navbar-nav">
<li>CreateEvent</li>
<li>MyEvents</li>
<li>Contacts</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Account</li>
</ul>
</div>
</nav>
The problem is this piece of code: /* min-width: 1400px; */
And you can find it in your class -> .navbar
It basically causes your drop-down menu not to show. And the menu buttons don't resize along as you want them to.
Hope this helps you out!
Cheers
I'm using twitter bootstrap 2.3 and when I make my browser smaller it collapses correctly but when I click on the button to do the dropdown it doesn't appear in front of the other items. Here is a working demo: http://www.thehighlightnetwork.com/ I've been trying to fix it in the developer tools in Chrome but to no avail.
Here is the relevant code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" 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>
</button>
<a class="brand" href="/"><img src="http://i.imgur.com/8dN9Ck1.png" alt="small logo" style="height:50px;"></a>
<div class="nav-collapse collapse" style="height:0px;">
<ul class="nav">
<li>The Highlight Network</li>
<li>Official Blog</li>
<li>Profile</li>
<li>Logout</li>
<li>Sign Up!</li>
<li>Upload</li>
</ul>
<ul class="nav pull-right">
<li>
<div class="center-it">
<form class="form-search" action="/search" method="GET" style="margin:0; margin-top:15px;">
<input type="text" name="search_tag" placeholder="search..." class="input-medium search-query pull-right">
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
In the official demo site it pushes down all the other elements which I would be happy with or if I can simply make it so that it is in front of the other elements.
The static position of your fixed navbar is causing this, the following css will override that and fix your problem (confirmed in chrome)
.navbar-fixed-top, .navbar-fixed-bottom {
position: relative !important;
}