How do I center list items on a container-fluid navigation? I have been jsfiddling with this for hours. I havent gotten anything that works properly. Looked over a ton of websites for answers.
<nav class="navbar navbar-info navbar-fixed-top">
<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="hidden-xs" href="#">
<div class="logo-container">
<div><img src="assets/img/logo-header-optimized.svg" alt="" height="52" style="margin:10px 0px 10px 0px"></div>
</div>
</a> <a class="visible-xs navbar-brand"><img src="assets/img/phone-logo-header-optimized.svg" alt="" height="22"></a> </div>
<div>
<ul class="hidden-xs nav navbar-nav navbar-right" style="margin-top:10px">
<li>
<button type="button" class="btn btn-inverse navbar-btn btn-raised" onclick="window.open('')"><strong> BOOK NOW </strong></button>
</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="navbar-header">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li> Introduction <i class="material-icons"></i>
</li>
<li> Amenities <i class="material-icons"></i>
</li>
<li> Hospitality <i class="material-icons"></i>
</li>
<li> Information <i class="material-icons"></i>
</li>
</ul>
</div>
</div>
</div>
First: The div <div class="navbar-header"> should have a "witdh:100%".
Second: between insert a div with this style="width: 60%; margin: 0 auto;"
The width: 60% depending of elements
I tried the solution by Julian and it lowers the button on the left and I dont think he wants that. The two solutions that I have are to add one of 2 css styles.
First one .navbar-header {padding: 0 300px;} this will center the list items but will also move the image with it
Second one .navbar-nav {padding: 0 300px;} this will center the list items but will also bring the button closer to the middle but still in the same row as the image.
If you want to dig deeper, I recommend reading this
Related
My logo is not fixed on the left side of my links, it keeps floating, when I change the screen size, and I can not put it right. I want to leave fixed for when I decrease the size of the screen I can correctly see the Hamburger menu working. What is happening is that, for some reason, I can not leave it lined up on the left side. Can anyone help me with this ?
<header class="menu-bg navbar">
<div class="menu ">
<div class = "">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="menu-logo">
<img src="img/MYLOGO.png">
</div>
<div class="menu-nav">
<div class=" collapse navbar-collapse" id="myNavbar" >
<ul class="nav navbar-nav">
<li>
LINK_1
</li>
<li>
LINK_2
</li>
<li>
LINK_3
</li>
<li>
LINK_4
</li>
<li>
LINK_5
</li>
<li>
LINK_6
</li>
</ul>
</div>
</div>
</div>
</header>
I have a navbar in my project which renders as expected in chrome, FF and IE 11, but somehow Internet Edge is special.
Below is the html code which defines the navbar:
<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0px" id="mainNavbar">
<div class="container-fluid">
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="desktop.aspx">
<img id="Image1" style="padding-top:0px; padding-left:0px;width:200px;height:44px;" src="logo.png"/>
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="affected.aspx"><img src="log-incident-icon.svg" style="height:25px;"/>
<span style="margin-left:5px;">Log an incident</span></a></li>
<li id="adminMenuItem">
<a href="myIncidents.aspx">
<img src="my-incidents-icon.svg" style="height:25px;"/>
<span style="margin-left:5px;">My Incidents</span>
</a>
</li>
<li>
<a href="incidentRegister.aspx">
<img src="allocate-incident-icon.svg" style="height:25px;"/>
<span style="margin-left:5px;">Allocate incident</span>
</a>
</li>
<li>
<a href="dashboard.aspx">
<img src="dashboard-icon.svg" style="height:25px;"/>
<span style="margin-left:5px;">Dashboard</span>
</a>
</li>
<li>
<a href="admin.aspx">
<img src="settings-icon.svg" style="height:25px;"/>
<span style="margin-left:5px;">Admin</span>
</a>
</li>
<li>
<a href="default.aspx">
<img src="logout-icon.svg" style="height:25px;"/>
<span style="margin-left:5px;">Log out</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Below is what the navbar should look like:
And here is what Microsoft Edge spits out:
The link tags seem to be taking up all the space, but I can't figure out a way to make them shrink to the width of the content without breaking the layout further. Any suggestions?
I've just found out that I have the same issue.
When I removed the svg icons, it worked. Try using .png, .jpg or whatever. Must do the same for items with icons inside the menu!
Header file is written to IE compatibility guide. Create a new CSS file, dedicated to deal with Internet explorer browser compatibility problems.
On my website in development, I have a link in my navbar that should bring me to the section with the id About, however It seems to ignore the positioning of my navbar, thus throwing off the position a tight bit. Any help in resolving this issue would be appreciated
Visualization of the Problem
Before clicking: http://imgur.com/akrheOX
After clicking: http://imgur.com/zlmL6GQ
Navbar Code
<nav class="navbar navbar-default navbar-fixed-top">
<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 page-scroll" rel="home" href="#" title="Virtual Currency Converter"><img style="max-width:350px; margin-top: -20px;"
src="./assets/img/vicuco_brand.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#About">About</a>
</li>
<li><span class="glyphicon glyphicon-cog gi-2x"></span></li>
</ul>
</div><!-- nav-collapse -->
</div>
</nav>
About Section Code
<section class="bg-primary" id="About">
<div class="row">
<div class="container">
<div class="row">
<div class=" text-center">
<h2 class="section-heading" id="AboutHeader">About Us</h2>
<div id="AboutSubtitle">
<p>
Vicuco stands for <strong>Virtual Currency Converter</strong>. <br><br>
Indeed, it is our goal to allow for simple and easy conversion <br>
of the virtual currencies among themselves, as well as to foreign currencies. <br><br>
We are an aggregator. That means we aggregate virtual currency <br>
trading data from all major virtual currency exchanges, in order <br>
to show you a near real-time conversion rate. <br><br>
We will send you in the right direction, if you need to buy, sell, or <br>
exchange virtual currency.<br><br>
</p>
<p>
Follow us on <a class="btn btn-social-icon btn-twitter" href="https://twitter.com/vicucodotcom">
<span class="fa fa-twitter fa-2x"></span></a> and check out our
<strong>blog</strong>
for our latest developments!
</p>
</div>
</div>
</div>
</div>
<img src="assets/img/cloud.png" id="cloud" width="25%" height="100%">
</div>
</section>
You are using a fixed header, so it's location and size will be ignored by the other page contents. One method to fix this is to use a little script that does the following:
Detects the navbar height
On navabar item click - scroll the page but offset it from the top of the viewport
The offset is determined by the navbar height we just detected.
You can see it added below.
I say 'one method' because there is an alternate approach where the anchor points can be offset (see here)
$(document).ready(function() {
$(".navbar ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(this.hash).offset().top - $('.navbar').height()
}, 600);
});
});
#one, #two, #three {
height: 1000px;
}
#one {
background: pink;
}
#two {
background: salmon;
}
#three {
background: lightsalmon;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http:////maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<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="#">Offset Scroll</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Section one</li>
<li>Section two</li>
<li>Section three</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<section id="one"></section>
<section id="two"></section>
<section id="three"></section>
</div>
</body>
I am trying to change the image in my naviation to a larger size.
However by doing this the navbar get's malformed.
I have the code over here: http://www.bootply.com/941lMP3fj6#
The problem might be that the image is in an anchor tag. But not sure.
Try:
.navbar-brand
{
padding-top: 0;
}
Working: http://www.bootply.com/cCg5FvZyZP
Add this to your styles:
.navbar-brand
{
margin: 0;
padding: 0;
{
.navbar-brand img
{
max-height: 100%;
}
http://www.bootply.com/rAzwwIbCBI
You need to adjust the height of the navbar.
You can use this variable in LESS to adjust the height and it will center the navbar vertically and include all necessary padding:
#navbar-height
50px is the default.
How to adjust this in regular CSS is to change the min-height of .navbar and the height of navbar-fixed-top and then adjust padding of .navbar-nav.
This is how the top part should be structured (missing navbar-header):
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="/" title="www.site.nl">
<img src="//placehold.it/200x51">
</a>
</div>
Example Bootply: http://www.bootply.com/tOoeM8o8Om
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar navbar-collapse collapse navbar-responsive-collapse">
<div class="pull-left" style="margin-right: 15px;">
<a rel="home" href="/" title="www.site.nl">
<img src="//placehold.it/200x51">
</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Link 1</li>
<li>Link 2</li>
</ul> <!-- end nav-->
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<strong class="caret"></strong> Select language
<ul class="dropdown-menu dropdown-menu-right">
<li>NL</li>
<li>IL</li>
<li>ENG</li>
</ul>
</li>
</ul> <!-- end nav menu right -->
</div> <!-- end nav-collapse -->
</div>
Put your logo inside the container.
The above code works!!
Check and let me know if you have any issues!!
I'm having trouble with lining up the connections and sign out sections on my navbar toggle. As you can see, the last two are out of line with the others. I am using the bootstrap 3 site as a reference, but I'm sure I have something not marked right.
HTML
<nav class="navbar navbar-default" role="navigation">
<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" href="#">Site</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Dash</li>
<li>Edit Profile</li>
<li>Invite</li>
<li>Record A Message</li>
<li>
<p class="navbar-text">Connections <span class="badge">0</span></p>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text">Sign out as <a class="navbar-link" href="Login.aspx">User</a></p>
</li>
</ul>
</div>
<!-- /.navbar -->
</nav>
Thank you
I have tried a few different ways and the only solution I found without breaking the "mobile-first" approach was overriding the "navbar-text" class with a margin-left: 15px which also appears on the #media (min-width: 768px) line 4695.
.navbar-text {
margin-left: 15px;
}
I hope it helps ;)
trying removing the paragraph tags