Social Media icons in navbar horizontal spacing - html

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

Related

Change bootstrap menu according to page width

I'm developing a web application and I put in my application the bootstrap menu I would like when the application reaches the maximum width of max-width: 770px the menu would be the same as the menu that is in the normal width of the page.
But when giving the display none in the menu navbar-header it does not exit and the menu nav navbar-nav does not appear in the maximum width of the page of 770px
Menu in the normal width of the page
Menu at the maximum width of 770px
<div class="body-wrap" >
<nav class="navbar navbar-inverse" role="navigation" id="azul">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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" ></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<div class="conteudo"><li>Pagina Principal</li></div>
<div class="conteudo"> <li>Contato</li></div>
<li class="dropdown">
<div class="conteudo"> Produtos <b class="caret"></b></div>
<ul class="dropdown-menu">
<li>Camisetas</li>
<li class="divider"></li>
<li>Calças</li>
<li class="divider"></li>
<li>Bermudas</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
CSS
#media (max-width: 770px) {
body{
background-color: yellow;
}
.navbar-header{
display: none;
}
.nav .navbar-nav{
display: inline;
}
}
I am not sure If I got what you mean but if you want to disable navbar-collapse you can simply add this CSS:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
Fiddle here
You can simply remove:
the button in element with class "navbar-header"
remove css classes "collapse navbar-collapse"
In this way the button disappear and you don't need to add extra css rules.
The main bar will remain visible with all widths.

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>

logo image hidden and text overhead logo

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/

Boostrap navbar center content

I need to center some content in bootstrap navbar
trying and copy from other post but isn't working...
Bootstrap: center some navbar items
JSFiddle example
my code:
CSS:
.navbar-nav ul > .center-nav {
display: inline-block !important;
left: 0 !important;
right: 0 !important;
text-align:center !important;
width:70% !important;
}
.navbar-nav > .center-nav ul, .navbar-nav > .center-nav li a {
display: inline !important;
float: none !important;
line-height: 40px !important;
}
HTML:
<nav class="navbar navbar-inverse">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Left <span class="sr-only">(current)</span></li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav center-nav">
<li>center</li>
<li>center</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>right</li>
<li>right</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Place your center navigation after the right in your markup. Remove floats, display the center nav items as inline-block and align them centrally.
Note that since this changes the order of your markup, a mobile device will list the right navigation items before the centre ones.
HTML
<nav class="navbar navbar-inverse">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Left <span class="sr-only">(current)</span></li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>right</li>
<li>right</li>
</ul>
<ul class="nav navbar-nav center-nav">
<li>center</li>
<li>center</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS
#media screen and (min-width: 768px){
.center-nav{
float: none;
text-align: center;
}
.center-nav > li{
float: none;
display: inline-block;
}
}
JSFiddle
If I understand your question correctly you are wanting to center the li's with the class name center-nav.
Add the following to your css if that's what you are looking for:
.center-nav {
text-align: center;
}
You're using this Bootstrap class:
<ul class="nav navbar-nav navbar-right">
<li>right</li>
<li>right</li>
</ul>
navbar-right
Which clearly floats that part of the navbar to the right.
You should try to look into the classes you are using, especially if taken from a framework, and ESPECIALLY if taken directly from a template.
The !important will have no effect if your custom CSS comes before the Bootstrap CSS, which is probably what's happening.

removing floats from bootstrap navbar without affecting layout

hey guys i am basically new to css and trying to build a bootstrap navbar ,the issue is that i had to center certain contents of the navbar I.E , center the menu items .
basically after going through the source of the bootstrap navbar i figured out that the reason all elements in the navbar appear in one line rather then moving on to the next line is because the elements in the navbar are floated either right or left , the movement you remove the floats the alignment is broken ,
so what i tried to do is : - HTML code(TYPICAL bootstrap markup) :
<nav role="navigation" class="navbar navbar-default navbar-fixed">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand -->
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
</div>
</div>
</nav>
And the CSS(customized css) :
.navbar-default .navbar-collapse ul.navbar-nav{
text-align: center;
float: none;
width: 300px;
}
.navbar-default .navbar-collapse ul.navbar-nav li {
float: none;
display: inline-block;
}
.brand-holder {
height: 200px;
background: #000;
}
.navbar-fixed {
position: fixed;
width: 100%;
}
The thing to notice is see how i have removed the floats in ul.navbar-nav and ul.navbar-nav li
Fiddle here . , now see how the contents of
<ul class="nav navbar-nav navbar-right">
<li><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
is floated to the next line . is there anyway that i can have the contents back inline with the menu items ?
P.S. :: i would really like to avoid using absolute positioning .
Thank you.
Alex-z.
If my understanding of your question is correct, probably by changing the CSS as below
.navbar-default .navbar-collapse ul.navbar-nav{
text-align: center;
float: none;
text-align:left;
and instead of keeping an another UL for the FB Logo keep the whole Li as in the first Ul itself and aligning to right, should help
so the final html will be
<nav role="navigation" class="navbar navbar-default navbar-fixed">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand --> <!-- </div>-->
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li style="float:right"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
</div>
</div>
You can have a check on the result fiddle
Hope this helps.
Thanks,
Philemon