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
Related
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>
Wondering how to fix the mobile version of my github page, which I made tweaking a bootstrap template. On the mobile version only, the navbar cuts off the top of the first image in my portfolio. I can't figure out how to fix it, I think the problem is in the navbar:
<!-- navbar-->
<header class="header">
<div role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">CHLOE WATSON COLLAGE
<div class="navbar-buttons">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle navbar-btn ">Menu<i class="fa fa-align-justify"></i></button>
</div>
</div>
<div id="navigation" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="page-scroll">
WORKS
</li>
<li class = "page-scroll">
ABOUT
</li>
<li class="page-scroll">
CONTACT
</li>
</div>
</div>
</div>
</header>
Any help greatly appreciated! Thanks! I've also linked to my repository if the above code is not enough.
https://github.com/chloewatson/chloewatson.github.io/blob/master/index.html
fist thing you brand name CHLOE WATSON COLLAGE so long for mobile device remove letter spacing in mobile
#media (min-width:0px) and (max-width:767px) {
.navbar a.navbar-brand {
letter-spacing: 0;
}
}
i thing it's ok but if these not working then use second css add your css file in last line
#media (min-width:0px) and (max-width:767px) {
#portfolio {
padding-top: 121px;
}
.navbar a.navbar-brand {
letter-spacing: 0;
}
}
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.
We are designing a new website, and the designer has created the nav bar as follows, you can see the curve (this is what I'm trying to crack!)
Below is how my current header is
This is my current HTML, I also had to create a new CSS class for the brand so it would appear in the middle of the screen
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href='#Url.Action("Index", "Home")'>LOGO HERE</a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>PRODUCTS</li>
<li>FLAVOUR LAB</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT US ON LIFE INVADER</li>
</ul>
</div>
</div>
</nav>
And the css is as follows
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
When I create a test image and try to apply the style i.e back ground image I get the following output, as you can see the logo with the curve half shows and appears to the left hand side of the screen.
The updated CSS
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
background-image: url('/Content/Images/TempLogoExample.png');
background-repeat: no-repeat;
z-index: 9999;
}
I've attached a test Image for anyone that feels they want to have a go at it, any solution/advice would be highly appreciated.
It appears on the left corner because you have set Left:0. try changing that using percentage mark. Eg:- left: 45%;will work in your case. if not try changing the percentage value.
I Recommend to go with a different markup approach to achieve this. Why can't you use columns grid in the main section and then bring your designs internally. Below markup will help you to acheive this.
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<div class="col-xs-4">
<ul class="nav navbar-nav navbar-left">
<li>PRODUCTS</li>
<li>FLAVOUR LAB</li>
</ul>
</div>
<div class="col-xs-4">
<a class="navbar-brand" href='#Url.Action("Index", "Home")'>LOGO HERE</a>
</div>
<div class="col-xs-4">
<ul class="nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT US ON LIFE INVADER</li>
</ul>
</div>
</div>
I am having problems creating a centred navigation bar where the child elements are also centred. I used nav-justified which almost works but then that seems to break the model so that when the window is smaller the collapsed menu stops working properly.
Html code is:
<header id="header">
<div class="container">
<!-- MOBILE MENU -->
<button id="mobileMenu" class="fa fa-bars" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"></button>
<!-- NAV MENU -->
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul id="onepageNav" class="nav nav-justified"><!-- id="onepageNav" for homepage only -->
<li class="active">How</li>
<li>Help</li>
<li>Support</li>
<li>Consultancy</li>
<li>Blog</li>
</ul>
</nav>
<!-- /NAV MENU -->
</div>
</header>
Not sure what css to include so will add whatever you need to see.
There are a few questions on this already out there but the answers don't seem to work for me.
Really very grateful for any help and explanations as I am quite new to this.
Thank you
If you want them to have space between them, you're dealing with a common problem. Here's a good resource: http://css-tricks.com/equidistant-objects-with-css/
However, if you just want them simply arranged centered
nav { text-align: center; }
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
background: pink;
padding: 1em;
}
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul id="onepageNav" class="nav nav-justified"><!-- id="onepageNav" for homepage only -->
<li class="active">How</li>
<li>Help</li>
<li>Support</li>
<li>Consultancy</li>
<li>Blog</li>
</ul>
</nav>