Here is the fiddle to see issue.
https://jsfiddle.net/nn6ydqcw/1/
<header>
<nav class="navbar navbar-inverse" role="navigation ">
<div class="col-md-12" style="height:150px;background-color:#FFFFFF">
<div class="col-md-3" ><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/200px-Google_%22G%22_Logo.svg.png"></div>
<div class="col-md-9" ><h1>Tag line will come here and it will be managed dynamically</h1></div>
</div>
<div class="col-md-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></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">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</header>
I am using Bootstrap 3 in above code and it works fine on desktop / laptop etc. But when I see it in mobile or resized browser to see in smaller screen, it is displaying in following sequence. So problem is that in smaller screen when I click on toggle icon then navigation buttons overlaps tag line.
Logo
Navigation Toggle Icon
Text based Tag line
I want to do so they display in following sequence. So even when I see them in smaller screen, navigation buttons should not overlap tag line.
Logo
Text based Tag line
Toggle Navigation Toggle Icon
Please let me know how can I get required result.
Update your code as follows:
CSS:
#media only screen and (max-width: 768px) {
body {
background-color: orange; //FOR TESTING PURPOSE
}
#tagstyle {
position: relative;
left: 220px;
top: -200px;
padding: 0px;
width: 60%;
}
}
HTML: [Add an id as shown below]
<h1 id="tagstyle">Tag line will come here and it will be managed dynamically</h1>
Desktop View:
Mobile View:
Check the style="height:150px;background-color:#FFFFFF" you're having conflict in the height:150px; And I think you need to use the push and pull in bootstrap.
Related
I want to make bootstrap navbar smaller and keep it right but small issue here i have some data dynamically loading at right side of grid that is overlapped by navbar so i want to keep navbar offset around 3 columns from right,so I added css class container-panel to make width smaller and to keep it to right i have margin-left.But on different pixels it breaks and navbar is overlapped on other elements. Is there any fix in bootstrap to achieve this task ?
main.html
<div class="col-md-10">
<nav class="navbar navbar-default container-panel">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="z-index:10;">
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<span class="glyphicon glyphicon-file"></span><span class="caret"></span>
<ul class="dropdown-menu">
<li><span ng-click="createXml()">Create new BPMN Diagram</span></li>
</ul>
</li>
<li><span class="glyphicon glyphicon-folder-open"></span></li>
</ul>
</div>
</div>
</nav>
</div>
main.css
.navbar.container-panel {
width:554px;
margin-left: 760px;
}
Use a variable width, like vw or % to adapt the width relative to the screen width. You may have to tweak the vw or % at smaller breakpoints as to not cut off your navbar content.
.navbar.container-panel {
width:60vw;
margin-left: 760px;
}
or
.navbar.container-panel {
width:60%;
margin-left: 760px;
}
I can't seem to figure out why this is.
My code is as follows:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container-fluid">
<div style="text-align:center"><a href="http://www.leagueofassassins.co.uk">
<img class="banner" src="../images/logos/Logo%20for%20LoA.png"></a>
</div>
<!--Navbar Begin-->
<nav class="navbar-static-top navbar-inverse navbar-inner navbar-custom" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#"></a>-->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Info</li>
<li>Roster</li>
<li>WarcraftLogs</li>
<li class="active">Apply</li>
</ul>
</div>
</div>
</nav>
<!--Navbar End-->
For some reason, it leaves a big area at the right hand side when vertical but works when my phone is horizontal. I have included pictures below. Any help would be appreicated. I want it to be full screen width.
Ignore the well at the bottom with the overflowing text, please. That's not the problem.
See http://www.leagueofassassins.co.uk/apply/
It looks like your "main-pane" cals got 60% width, try removing it and it should work fine.
CSS Class
.main-pane {
margin-top: 1%;
margin-bottom: 5%;
width: 60%; // remove this line
height: 100%;
}
It turns out that I'd accidentally missed some padding on either side of .container-custom and the bottom content was spilling over causing the page to need to be widened. It works now. Thanks.
I would like:
1. The Free Quote Button to be forced right
2. At small screensizes I would like free quote button to remain to the right of the (icon bar button [mobile menu])
3. I don't want the navigation bar to take up an extra line when at smaller screen size
Fiddle:
http://jsfiddle.net/z7V4F/
HTML:
<!-- Nav bar -->
<nav class="navbar navbar-inverse navbar-fixed-top navi-style" role="navigation">
<!-- quote button-->
<!--Free Quote-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand menulogo" href="#">
My Site + Logo Makes This Long
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!--<li class="active">Home</li>-->
<li class="dropdown"> Info Tab<b class="caret"></b>
<ul class="dropdown-menu">
<li>Overview
</li>
</ul>
</li>
<li class="dropdown"> contact Tab<b class="caret"></b>
<ul class="dropdown-menu">
<li>Overview
</li>
</ul>
</li>
<li class="dropdown"> about Tab<b class="caret"></b>
<ul class="dropdown-menu">
<li>Overview
</li>
</ul>
</li>
<li class="dropdown"> More Tab<b class="caret"></b>
<ul class="dropdown-menu">
<li>Overview
</li>
</ul>
</li>
<div class="navbar-right"> Free Quote
</div>
</ul>
</div>
</nav>
1. The Free Quote Button to be forced right
I would use position: absolute; here to avoid excessive juggling with margins and paddings. This way it will always stay on the same line. This will look worse if your navbar-header and nav items are wider though than in your fiddle.
.navbar-right {
position: absolute;
right: 0;
}
2. At small screensizes I would like free quote button to remain to the right of the (icon bar button [mobile menu])
Put another <button> above the navbar-toggle with pull-right and visible-xs classes. This will place the button on the right side of the navbar-toggle and make it visible only on XS screen sizes.
<div class="pull-right visible-xs free-quote">Free Quote</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand menulogo" href="#">
My Site + Logo Makes This Long
</a>
Give hidden-xs class to the other button so It won't show up in XS screen sizes. (example in answer to number 3)
3. I don't want the navigation bar to take up an extra line when at smaller screen size
You can show smaller button on SM screen sizes to avoid the need for navbar to expand on two lines like this (by need I mean otherwise it is more likely that navigation items and the button will overlap each other):
<div class="navbar-right hidden-xs free-quote">
Free Quote
Free Quote
</div>
I would suggest that you show logo or text only in navbar-brand on XS screen sizes so that they won't jump to their own line when the screen size is only e.g. 320px wide.
4. Extra: Make it look nice
Give some padding and margin to those buttons to align them nicely.
.free-quote {
padding: 9px 5px 9px 0
}
.free-quote > .btn-xs {
margin-top: 4px;
}
Here is the fiddle: http://jsfiddle.net/z7V4F/3/
You need to have two buttons.
One within the navbar-header and one outside.
The button within the navbar-header should only be visible at the extra small screens, as everything not within navbar-header is hidden at xs.
Everything within navbar-collapse will be hidden (become a mobile menu) at extra small sizes.
Html:
<div class="menuquote navbar-right hidden-xs"> Free Quote
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand menulogo" href="#">
My Site + Logo Makes This Long
</a>
<div class="menuquote navbar-right pull-right hidden-sm hidden-md hidden-lg"> Free Quote
</div>
</div>
http://jsfiddle.net/4nmzh/
To get the button to be forced left and to appear to the right of the mobile menu toggle, put this div:
<div class="navbar-right">
Free Quote
</div>
just before the navbar-header and change navbar-right to pull-right
This takes the button out of the navbar formatting and forces the button to the right as pull-right is bootstrap's float: right class.
To stop your navbar going on to two lines at very small screen sizes your options are:
Set a min-width on your <nav class="navbar">
.navbar {
min-width: 470px;
}
(see this demo)
Shrinking the size of your logo/text in your <a class="navbar-brand"> at small screen sizes using media queries e.g.:
#media (max-width: 500px) {
navbar-brand {
...
}
}
When your navbar is larger I have reduced the padding on the list items to make them stay on one line:
ul.nav li a {
padding-left: 8px;
padding-right: 8px;
}
This Demo should at least give you a starting point.
Hi you can move free quotes outside the tag and add absolute position to it
look at the fiddle: http://jsfiddle.net/z7V4F/4/
As I said i moved div containing free quotes outside navbar-collapse and added next css.
.custum-free-quotes{
position:absolute;
right:0;
top: 0;
}
.navbar{
position relative;
}
Ok, So I am creating a website with Bootstrap and I have run into an issue. I have placed an image in the nav bar in the logo and then I go to resize the browser to force mobile layout. When I get to where the image should start re-sizing, it drops below (or above) the menu toggle before re-sizing.
I have even tried adding .img-responsive to it but that is no help.
Here is an image of what I am talking about:
And here is my code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://lorempixel.com/300/40/" class="img-responsive" alt="LOGO"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
Any help would be appreciated
Thanks.
There are several ways to solve this. You can use media queries to set max-width or percentage width to .navbar-brand.
The clearest solution might be to use CSS3 calc to make it take 100% width minus the space that the menu button is taking (22px width + 20px of padding + 2px of border + 15px of margin = 59px total space). And because your image is pushed down at 390px screen width, your media query should be:
#media (max-width: 390px) {
.navbar-brand {
width: calc(100% - 59px);
}
}
Check the JSFiddle with the result.
My other answer might help you as well.
currently not knowing how to continue. I got an absolute positioned div element at the bottom of the page. I want to place a logo which is centered and also left and right from the logo i want to place the navigation ( i am working with bootstrap ). Here is an image from my idea so you can get a better view:
Here is my code of the position absolute div at the bottom. I kinda lost it pretty fast and appreciate every help i can get!
<div id="footmenu">
<div class="container navresize">
<nav class="navbar navbar-default" role="navigation">
<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">
<ul class="nav navbar-nav navleft">
<li>Home</li>
<li>Portfolio</li>
<li>Über uns</li>
<li></li>
<img src="images/logo.png" />
</ul>
</div>
</div>
</nav>
</div>
</div>
CSS:
#footmenu {
background:grey;
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
}
( I deleted the rest of the css because i was pretty sure that it was wrong )
Again thanks for the help and i appreciate your time !
Edit: Will update the jsfiddle now. Here is a result i found which shows perfectly what i want to get: http://www.templatemonster.com/demo/39221.html
Here is the jsfiddle: http://jsfiddle.net/Su6VF/2/embedded/result/
You can try with inline-block display for the divs containing the list items and the logo and text-align:center to the wrapping div to position these in the center.
Check this FIDDLE
This might help you. Here is the styles used
.row{
text-align:center;
}
.col-md-4{
display:inline-block;
float:none;
width:auto;
}