Align text of all nav menu items - html

I have a menu in my website which is not aligned.
Picture
How do I go about aligning all the text of nav menu with the text of the blue button on right? I have tried the following code which doesn't seem to work right.
HTML
<nav class="navbar bg-color3">
<div class="container-fluid">
<img src="/Content/images/uploads/photo-01.png" width="410" alt="PG Portal de Gastos" style="float: left; margin: 18px 10px 10px 0;">
<button class="round-toggle navbar-toggle menu-collapse-btn collapsed" data-toggle="collapse" data-target=".navMenuCollapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navMenuCollapse">
<div class="login-panel">
<ul id="nav-list" class="nav pull-right">
<li>Inicio</li>
<li>Beneficios</li>
<li> Funcionalides</li>
<li>Planes</li>
<li>Contacto</li>
<li class="sub-menu-parent">
<a class="btn " href="#">Iniciar Sesión <i class="icon right-icon icon-login"></i></a>
<ul class="sub-menu">
<li>
<a class="btn btn-primary" style="border: 1px solid transparent;" href="#Url.Action("Login", "Cuenta")">
Portal
</a>
</li>
<li>
<a class="btn btn-primary" style="border: 1px solid transparent;" href="http://web.com/">
Portal
</a>
</li>
</ul>
</li>
<a class="btn btn-primary" href="#Url.Action("Registrar", "Cuenta")">
Iniciar Prueba<i class="icon right-icon icon-download"></i>
</a>
</ul>
</div>
</div>
</div>
</nav>

You have to remove the padding on .navbar .nav li:
.navbar .nav li {
padding:0;
float:left;
}
At the moment there is a padding:5px which causes a gap aroud the buttons.

The problem is in the padding of the .navbar .login-panel .btn class. If you remove the padding there ( padding: 0 20px; ) the text is horizontally lined. If you want the padding in the rest of the menu make specific padding for each of the classes.

use padding instead of height for both (adjust padding-bottom and padding-top for height problems)
try in both blue and white space

Related

Bootstrap header navbar height menu items

I come to you because I'm pulling my hair out of my head on a design issue with bootstrap navbars.
I did a fixed top navbar with differents menu, one on the right and one on the left.
My CSS code turns the background of my links to the grey when the user hover them. But I notice that my menu items don't have the same height so when my pointer hover the smaller item, the new color doesn't fill the full height of the header bar.
This is some screenshots to help you :
And there is the code of my header bar :
<div class="container-fluid header-bar">
<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">Admin Page</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-nav navbar-left">
<li>
<a href class=" profile_image" >
<img src="../../../images/user.png" class="img-circle" alt="profile-pic"> {{vm.account.name}}
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" uib-dropdown="">
<a href class="dropdown-toggle lang_selector" uib-dropdown-toggle="">
<span class="flag-sm flag-sm-{{vm.defaultLang.flag}}"></span><span class="lang_desc">{{vm.defaultLang.text}}</span> <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" uib-dropdown-menu="">
<li ng-repeat="lang in vm.langs"><a href class="lang_selector" ng-click="vm.defaultLang = lang"><span class="flag-sm flag-sm-{{lang.flag}}"></span><span class="lang_desc">{{lang.text}}</span></a></li>
</ul>
</li>
<li>
<a href="" ng-click="vm.logout()">
<md-icon class="li-icon-black material-icons" aria-label="logout">exit_to_app</md-icon>
</a>
</li>
</ul>
</div>
And there is the CSS code :
.smsmode-nav .navbar-header {
width: 250px;
}
.lang_selector > span {
vertical-align: middle;
}
.lang_desc {
margin-left: 8px
}
.navbar-nav > li > a.profile_image {
padding-top: 10px;
padding-bottom: 10px;
}
.profile_image > img {
width: 30px;
}
I know there is a story of padding but I try everything and I can't fix it. I'm desperated ! So I need your help please !
hi remove this css i hope you got your solutions
.lang_selector > span {
vertical-align: middle;
}

Different css position top between the browsers

I have some trouble with the positioning of my mobile menu.
It seems that chrome has a small shift from 1px then in the other browser and Ι don't know why. Αs well Firefox looks in a specific width range good, but not overall. Ι use bootstrap and bootstrap use noramlize.css to reset the elements.
Ι prepared it on jsfiddle and tried to figure out what the problem is but was not able to.
Ηere you can better see what Ι mean:
Ι use the normal navbar from bootsrap:
HTML
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="hamburger-icon"></span>
</button>
<div style="" aria-expanded="true" class="navbar-collapse collapse in" id="top-nav">
<ul class="nav navbar-nav nav-top">
<li>
<a class="dropdown-btn small" type="button" href="reseller.php">
<span class="icon reseller-icon"></span><span class="text">Reseller</span>
</a>
</li>
<li>
<a class="dropdown-btn small" type="button" href="first_step.php">
<span class="icon wizard-icon"></span><span class="text">Data capturing</span>
</a>
</li>
<li>
<a class="dropdown-btn small" type="button" href="settings.php">
<span class="icon settings-icon"></span><span class="text">Settings</span>
</a>
</li>
<li>
<a class="dropdown-btn small" type="button" href="archive.php">
<span class="icon archive-icon"></span><span class="text">Archive</span>
</a>
</li>
<li>
<a class="modalbox dropdown-btn small" href="#modalbox-language-country">
<span class="icon search-icon"></span><span class="text">Language / Country</span>
</a>
</li>
<li class="visible-xs">
<a class="dropdown-btn small" href="#">
<span class="icon"></span><span class="text">Logout</span>
</a>
</li>
</ul>
</div>
</div>
Due the css is not that small, it may be better to see it directly on jsfiddle.
Here is my code: https://jsfiddle.net/nm7b8jw2/5/
Thanks for any help
The issue occurs because Firefox renders the .navbar-header element with a height of 31px where as in Chrome the element is rendered with a height of 30px.
Such issues usually are handled by tweaking the line-height property of the elements. With two changes in the CSS it can be aligned in all browsers.
One is:
#media screen and (max-width: 991px) {
body {
font-size: 13.5px;
line-height: 20px; } } /* Line 17: previous value was 19px */
The second is:
header .nav-top-wrapper .navbar-header .navbar-toggle {
margin: 0;
padding: 4px 0 4px 10px; /* Line 279: previous value was 5px 0 4px 10px */
font-size: 19px; }
Here is a working demo.

Flexbox and Bootstrap How to Put Image in Navbar Brand Area

I have a project where I have used a bootstrap navbar but broken it up into flexboxes in order to align the various parts per specification. I want to put a logo in the far left corner of the navbar, where navbar-brand is usually given, but I'm having no luck getting an image to show. The best I can do is get an image placeholder icon to show. Attached is an image of the navbar as it stands now.
The following is the HTML for the navbar:
<div class="container first-container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container navcell flex-navbar">
<div class="navbar-brand">
<!--<a class="navbar-brand" href="#">-->
<img src="images/SST.jpg" class=" navbar-brand sst-image"></img>
<!--</a>-->
</div>
<button class="navitem 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="navitem navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navcell navbar-nav">
<li class="active"><span class="navitem glyphicon glyphicon-home"></span> Home</li>
<li><span class="navitem glyphicon glyphicon-edit"></span> Services & Rates</li>
<li><span class="navitem glyphicon glyphicon-book"></span> Portfolio</li>
<li><span class="navitem glyphicon glyphicon-user"></span> About/Contact John</li>
<li><span class="navitem glyphicon glyphicon-log-in"></span> Log In</li>
</ul>
<form class="navcell navbar-form">
<input type="text" class="form-control" placeholder="Search" id="searchinput">
<button type="navbtm submit" class="btn btn-default">
<span class="navitem glyphicon glyphicon-search"></span>
</button>
</input>
</form>
</div><!-- Nav-collapse -->
</div><!-- Container -->
</nav>
</div><!--Container-->
The pertinent .css is
body {
margin-top:50px;
background: url('../images/marble.jpg') no-repeat center top scroll;
}
.container{
width: 100%;
}
.navbar-brand {
background-image: url('../images/SST.jpg') no-repeat;
position: relative;
}
.banner {
font-family: 'atlas_of_the_magiregular', cursive;
font-size: 1.7em;
line-height: 1.3em;
padding: 10px 8px;
margin: 10px 0px;
background-image: url('../images/Sic Semper Scroll.png') no-repeat;
background-position: 50% 50%;
position: relative;
}
I included the banner section in the .css to show how I've implemented the scroll image below the navbar. I've tried setting the brand logo to be an image in the HTML, a background image in the CSS, nothing. I can put text into the navbar-brand and set it's color, but I'm having no luck with my logo image. What can I try next?
The problem seems to be with the relative path you are using for the image.
If you use an image with an absolute URL it works fine. Try this to see what I mean:
<div class="navbar-brand">
<!--<a class="navbar-brand" href="#">-->
<img src="http://i.imgur.com/60PVLis.png" alt="" class="navbar-brand sst-image">
<!--</a>-->
</div>
If you want to use a relative path, you need to make sure it's leading to the folder that contains the image. In your CSS the path is ../images/SST.jpg, but in your HTML the path is images/SST.jpg. You need to find the right path.
As a side note, keep in mind that <img> is a void element. No closing tag is required. You can remove the </img>.

Bootstrap navbar height changed on inserting brand image

I am new to HTML and CSS and have started coding in the last 4 days. I found bootstrap very useful to get things moving quickly.
Here is my attempt at getting a Navbar with transparency and fixed to the top.
http://jsfiddle.net/revanur/mf5wc/4/
<!-- Top-Navigation-Bar -->
<div class="row-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" id="topbar">
<div class="container"> <img class = "brand" src="http://placehold.it/269x50" alt="SparkCharger" />
<button id="topbtn" 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>
<div class="nav-collapse">
<ul class="nav pull-right">
<li class="active">
<form class="navbar-search brand">
<input type="text" class="search-query" placeholder="Search">
</form>
</li>
<li> <h5> Discover </h5>
</li>
<li> <h5> Blog </h5>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><h5>Start <span class="caret"></span></h5></a>
<ul class="dropdown-menu">
<li> <h6> Login </h6>
</li>
<li> <h6> Signup </h6>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Top-Navigation-Bar -->
However, the height of the navbar seems to change based on brand image size. I have no problem with that but I notice significant spacing between the image and the navbar top and bottom. How do I change this. Also, is it possible to fix the navbar size so that the navbar does not have a mind of its own.
There are a few things affecting the height of the navbar:
div class="navbar-inner" (5px padding)
img class="brand" (10px padding)
the size of the image
You can remove the padding by:
img.brand {
padding: 0;
}
And/Or you can specify the height of the navbar:
div.navbar-inner {
height: 10px;
}
Use something like this:
.brand {height: 25px;}
Demo: Fiddle

twitter bootstrap IE9, nav collapse not pushing rest of content down

Im not sure is this an issue with the content below it, or nav-collapse itself, But the only way I can seem to replicate the issue in firefox is by changing float:left to float:none in the code below. Basically when I toggle the menu the content below it doesnt get pushed down in IE9
.navbar .navbar-inner .nav-collapse.collapse
{
background: #6E2E8F;
border-radius: 5px 5px 5px 5px;
float: left;
height: 0px;
margin-bottom: 15px;
padding: 0;
width: 100%;
}
.navbar {overflow: visible;}
Here is the outputted html...
<div class="navbar">
<div class="navbar-inner">
<a data-target=".nav-collapse" data-toggle="collapse" class="brand visible-phone"> Categories</a>
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>***CONTENT***</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span>Start Shopping
</span><span class="active_downarrow"></span></a>
<span class="sub-menu-response">
<ul class="dropdown-menu" > ***CONTENT*** </ul>
<ul class="dropdown-menu" > ***CONTENT*** </ul>
<ul class="dropdown-menu" > ***CONTENT*** </ul>
<ul class="dropdown-menu" > ***CONTENT*** </ul>
<ul class="dropdown-menu" > ***CONTENT*** </ul>
</span>
</li>
<li> ***CONTENT*** </li>
<li> ***CONTENT*** </li>
<li>***CONTENT*** </li>
</ul>
</div>
</div>
</div>
Here is the link to the site... http://bc_mobile.hailstormcommerce.com/
You can try adding this css class:
.nav-collapse.collapse.in {
height: auto !important;
}
Because when you drop-down the navigation, bootstrap gives it an initial width fixed.