logo image hidden and text overhead logo - html

Can someone have a look to this fiddle http://jsfiddle.net/pkcwtone/1/ and tell me why I am not able to put the image all right inside the navigation?
This is html:
<nav id="mainNavigation" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Responsive navigation -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2"> <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="">
<img src="http://s28.postimg.org/gc8ajkjq5/advance_logo.png" alt=""/>
</a>
</div>
<div class="clearfix"></div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<!-- top navigation-->
<ul class="nav navbar-nav navbar-left">
<li>
Home
</li>
<li>
Accident<br>Management
</li>
<li>
Approved<br>Manufacturers
</li>
<li>
Our<br>Services
</li>
<li>
About<br>Advance
</li>
<li>
Contact<br>Us
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>
This is css:
#mainNavigation.navbar-default{
/*background: #f9540a;*/
background:black;
width: 100%;
text-align: center;
font-family:'Droid Sans', sans-serif;
font-weight:700;
font-size:1.2em;
}
#mainNavigation.navbar-header {
float: left;
padding: 15px;
text-align: center;
width: 100%;
}
#mainNavigation .container-fluid{
height:auto;
overflow:auto;
}
.navbar-brand img{
float:left;
}
I've been playing with overflow... with clearfix..... with the height.... but it looks bad :S The text overlays the logo, which it shouldn't (I know I could use padding, but I've though it must be a way more natural to keep in mind the space that the logo occupies), and then, the logo look cut! :S
Anyone can see what am I doing wrong?
Cheers :)

Looks like the issue is here:
#mainNavigation.navbar-header {
what the above css is looking for is a div with id mainNavigation and class nav-header
however you add a space between them, it looks for the class within the mainNavigation:
#mainNavigation .navbar-header {
you will be able to resize the navbar to fit the logo, see the updated jsfiddle:
http://jsfiddle.net/pkcwtone/4/

Related

Social Media icons in navbar horizontal spacing

I'm building a personal portfolio and I have a navbar with title, social media icons and navigation links. When viewing on mobile, the social media icons appear vertically under the title. I would like them to show up horizontally next to the title, so in between the title and the icon bar.
HTML:
<nav class="navbar">
<div class="container-fluid">
<!-- Navigation Bar -->
<button type="button" class="navbar-toggle collapsed" 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 class="navbar-header">
<a class="navbar-brand text-center" href="index.html">Title Website</a>
</div>
<!-- Small social media icons -->
<ul class="nav navbar navbar-nav navbar-left pull-left">
<li></li>
<li></li>
<li></li>
</ul>
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse-1">
<ul class="nav navbar-nav text-center">
<li><b>Home</b></li>
<li><b>Projects</b></li>
<li><b>CV/Resume</b></li>
</ul>
</div>
</div>
</nav>
CSS:
/* Navigation */
.navbar-header {
vertical-align: baseline !important;
}
.navbar-brand {
text-align: center;
font-size: 30px;
vertical-align: baseline !important;
}
.icon-bar {
background-color: black;
}
nav ul {
display: inline;
}
nav li {
display: inline;
padding: 10px;
}
Any help would be appreciated. Also, I would like the title to be vertically aligned when viewing on desktop. I tried navbar-brand {vertical-align: middle !important} but that did not work.
Thank you.
-Z
Got the icons how I wanted them by playing around. New code:
HTML:
<!-- Small social media icons -->
<ul class="nav navbar navbar-nav navbar-left pull-left">
<li id="socmed"></li>
<li id="socmed"></li>
<li id="socmed"></li>
</ul>
CSS:
#socmed {
display: inline-block !important;
float: left !important;
}

Bootstrap navbar: Width of left element affects position of element in the center

I'm new to bootstrap 3. At the moment I want to allign my navbar to the center. I did this with this approach, which works fine.
Now my Problem is that the width of my navbar-brand element affects the position of the centered stuff,e.g. the elements are moving to the left, if the branding gets bigger. Is there a way to position a element of the navbar at the "real" center of the screen?
It looks like that at the moment:
But I want at the real center of the screen like that, but with the brand:
My html:
<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 navbar-left" href="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Services<span class="caret"></span>
<ul class="dropdown-menu">
<li>Stuff</li>
</ul>
</li>
<li>Karriere</li>
<li>Über uns</li>
<li>Kontakt</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
My CSS:
#media (min-width: $grid-float-breakpoint) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
Thanks for your help!
Making the root element of the navbarbrand have an absolute position seems to give the desired effect. This causes your nav links to be centered without regard to the navbarbrand element. NOTE: If your 'brand' text length gets too long, it will overlap the nav links. https://jsbin.com/juyanijeku/edit?output
.navbar-header {
position: absolute;
}
I've tried something like this
a.navbar-brand {
display: block;
float: none;
text-align: center !important;
}
.nav> li {
display:inline-block !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header text-center">
<a class="navbar-brand" href="#">
Brand
</a>
</div>
<div id="navbar">
<ul class="nav navbar-nav text-center">
<li>Karriere</li>
<li>Über uns</li>
<li>Kontakt</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

Overlapping profile picture in the middle

Currently i have the following Header(Template from Bootstrap for Responsive Purposes):-
But it's not very nice to have a such big navigation pane, so now i want to place the Profile Picture in the middle of the Border like this(The circle should be the profile picture):-
The question is, how can I achieve this without using a absolute position which would ruin my responsive design? (It should be a proportion of 50/50)
Edit: The HTML Code for the Profile Picture is:-
<div id="nav_profile">
<div class="profile_picture">
<img src="assets/img/profilepicture.png" alt="Profile Picture">
<figcaption><i class="ion-android-add"></i></figcaption>
<a id="profile_hover_txt" href="profile.php">View Profile</a>
</div>
</div>
The CSS Part is just for the transitions and the styling for the Picture.
Try The Following Code....
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<a class="navbar-brand brand" href="#">Custom Logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>News</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <img width="50px" height="50px" class="img-circle" src="http://i.imgur.com/bQ6Rroe.jpg" alt=""></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
You can simply set the height of the picture to 200%. The float: right; and width: 100px; are just in my code so it works without an image but the principal works without them.
#menu {
width: 100%;
height: 50px;
background: #000000;
}
#pic {
float: right;
width: 100px;
height: 200%;
background: yellow;
}
<div id="menu">
<div id="pic"></div>
</div>

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;
}

Bootstrap 3 Navbar Mobile Issue

I am having trouble getting bootstrap 3's navabar to be responsive on a mobile device. The navbar continues to span further than the mobile display, and I cannot figure out what I did wrong.
The Code:
(HTML)
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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 img-responsive" href="index.html">
<img src="img/logo.png" width="320" height="85" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Getting Started
</li>
<li class="dropdown">
Products <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Brain Seed™
</li>
</ul>
</li>
<li>
About Us
</li>
<li>
FAQ
</li>
<li>
Contact Us
</li>
<li>
<button type="button pull-right" class="btn btn-success">ORDER NOW</button>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
The Code: (CSS)
.navbar-fixed-top .nav {
padding: 20px 0;
}
.navbar-fixed-top .navbar-brand {
padding: 0 15px;
}
.page-content {
padding-top: 40px;
}
.img-center {
display: block;
margin: 0 auto;
}
.navbar .brand {
max-height: 40px;
max-width: 30%;
overflow: visible;
padding-top: 0;
padding-bottom: 0;
}
I notice you in your html code, you typed fixed height and width, which cancels the img-responsive class.
Start by removing that and go from there...enter link description here