Bootstrap - Preventing Navbar from vertical stacking on iPhone - html

In the below Bootstrap 3 code, the nav bar will wrap vertically when in an iPhone. How do I prevent the vertical stacking. I wish it to stay horizontal on the bottom in one line.
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="navbar-header">
<a class="navbar-brand" href="#">Ny Title</a>
</div>
<ul class="nav navbar-nav">
<li> 123 </li>
<li> 123 </li>
</ul>
</div>

Found it:
<style type="text/css">
.navbar-nav>li {
float: none;
text-align: center;
display: inline-block;
}
</style>

Related

Bootstrap Fixed Navbar Links to stay on same line as Brand

Before Start, I have searched for the last few hours, found several replies but none that fixed this issue.
I only have one link, and I have a fixed to top navbar. I want the Link to stay on the same line as the Brand in mobile/smaller screens.
Right now on mobile (Ref image below):
I have tried floating it right to see if that helped, but it didn't.
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a></div>
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li class="active">1 Link Only<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-collapse.collapse {
display: inline-block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
You only need to delete collapse navbar-collapse classes and use a custom class. You can name it custom-navbar-nav. Finally, add the CSS showed here. If you definitely want your link on the top, you need to use media queries.
.navbar-header {
display: inline-block;
}
.custom-navbar-nav {
display: inline-block;
float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a></div>
<div class="custom-navbar-nav">
<ul class="nav navbar-nav">
<li class="active">1 Link Only<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>

Centering navbar not working

I'm very new to HTML and CSS. I'm trying to center the navbar at the top of a site. Here is my HTML code:
<!-- Navigation -->
<div class="nav_container">
<nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">
<div class="container">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav page-scroll" style="text-align:center">
<li>
<a class="page-scroll" href="#page-top">Start</a>
</li>
<li>
<a class="page-scroll" href="#packages">Packages</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#showcase">Showcase</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
And here is (some) relevant CSS code:
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
#media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
.nav_container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
position: relative;
opacity: 1;
text-align: center;
}
.nav_container nav {
display: inline-block;
text-align: center;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
I must apologise in advance if this question looks like a duplicate of other questions. I have tried out different permutations of how the CSS code should be set according to other answered questions, but to be honest how and which class in the CSS code takes precedence is still not clear to me and my navbar is just not centering. I took the code from a bootstrap site, and am simply reverse engineering. It could be that what is already written contains some redundant code (for example, there may be too many divs) and so may need to be cleared up.
change :
<div class="nav_container">
<nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">
<div class="container">
To :
<div class="container">
<div class="nav_container">
<nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">
Demo
Note : For See Result increment Result Page.

Bootstrap, how to adapt a logo to the navbar size?

I'm making the navbar of my Website with the following code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<img src="images/logo.png" class="img-circle">
</div>
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li> Liens </li>
<li> Login </li>
<li> Signup </li>
</ul>
</div>
</nav>
The problem is that the logo image is big (225x225 pixels), and I would like to set it to the default size of the navbar. But the opposite happens, i.e the navbar adapts to the size of the logo (and becomes very big).
I did not find any feature in bootstrap to do this ? Any idea ?
Thank you
navbar-fixed-top has a fixed height 50px, so you can directly style an image by setting e.g. max-height: 40px to it and margin: 5px to center image.
.navbar-header img {
height: 40px;
margin: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<img src="http://lorempixel.com/225/225" class="img-circle">
</div>
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li> Liens </li>
<li> Login </li>
<li> Signup </li>
</ul>
</div>
</nav>
I had the same problem sometime back and this is what I did . Hope this works for you
.brand{
max-height: 30px;
}
<a href="link/location/here" class="img-circle">
<img class="brand" src="img/logo.png">
</a>

Aligning navigation links evenly bootstrap 3

I have the following nav bar
As you can see either side of the logo in the middle, there is a great deal of white space ideally I would like to space the navigation links out evenly so it would look something like this
I have achieved what is shown in the second picture by using padding-left and padding-right which to me seems a bit of a hack, I've googled looking for a potential solution for this but with no avail. this is my current html you can see the padding I have entered.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-chevron-down pull-right"></span>
</button>
</div>
<a class="navbar-brand visible-lg visible-md hidden-sm hidden-xs"
style="background-image: url('/Content/Images/logo.png'); background-repeat: no-repeat; height: 94px; width: 301px; left: calc(50% - 148px); "
href='#Url.Action("Index", "Home")'></a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li id="lnkProducts">#Html.ActionLink("PRODUCTS", "Products", "Products")</li>
<li>FLAVOUR LAB</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li id="lnkVisitUs">VISIT US: <b>f</b></li>
<li id="lnkContactUs" class="visible-xs-block">#Html.ActionLink("CONTACT US", "Contact", "Contact") </li>
</ul>
</div>
</div>
</nav>
Thanks
** Update **
As requested please see below CSS for left and right nav bar
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
}
** Update **
This is whats shown when minimized to a mobile screen
I think you need to add width to your .navbar-left and .navbar-right to do this. and then add floats to the inner elements.
For example
<ul class="nav navbar-nav navbar-left" style="width:380px">
<li style="float:left" id="lnkProducts">#Html.ActionLink("PRODUCTS", "Products", "Products")</li>
<li>FLAVOUR LAB</li>
</ul>
UPDATE -
If giving width in PX to your navbar is not working in mobile you can use calc function in css to give the width. If the size of your middle icon is 301px*91px use following width for your left and right navbars
width: -webkit-calc(50% - 150px);
This may or may not be considered a hackish solution, depending on your need, but if you also need it to be responsive I'd probably go with table-display.
Yes, I know. But it keeps the layout clean and it works, at least until your logo's width is less than 20% of the container's width.
HTML:
<nav class="navbar navbar-default">
<div class="container">
<div class="collapse navbar-collapse">
<div class="nav navbar-nav">
<div>link1</div>
<div>link2</div>
<div class="text-center">logo</div>
<div class="r">link3</div>
<div class="r">link4</div>
</divv>
</div>
</div>
</nav>
CSS:
.navbar-nav { display: table; }
.navbar-nav > div { display: table-cell; width: 20%; }
.navbar-nav > div.r { text-align: right; }
The other thing to manage with this approach is that you have to build another, separate menu for the fluid viewport and switch between the two depending on screen size.

Twitter-Bootstrap navigation header with three elements (iOS style)

Im trying to do an horizontal bar that mimics the Navigation view on iOS, thats saying:
Back Logo SomeButton
Left Center Right
After fiddling with many solutions I've been able to get something similar, using
<nav class="navbar navbar-default" role="navigation">
<a class="navbar-brand" href="#"><img src="static/img_nav/logo_white_trans.gif"> </a>
<div class="navbar-header navbar-collapse">
<ul class="nav navbar-nav pull-left">
<li> < Back</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>Button</li>
</ul>
</div>
</nav>
with this CSS:
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar-brand img {
height: 20px;
}
When I do the browsing in my phone everything works as I expected, but when I go to larger screens, left and right buttons get together.
Left Right Center
Does anyone know why?
Try this:
The reason for your issue is :
In navbar-collapse the width is auto, So
Set width:100% in your navbar-header tag
<div style="width:100%" class="navbar-header navbar-collapse">
DEMO