I try to align my navbar placed at the top of my webpage, but somehow one of items appears straight down "Kontakt".
I would like all items i have to be in same line. Second issue is i cannot make my logo when click on it redirect to my page at the top again.
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="#bs-example-navbar-collapse-1"
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>
<img src="img/ico2.png" class="img-responsive" alt="logo">
</div>
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<div class="col-md-8 col-xs-12 nav-wrap">
<ul class="nav navbar-nav">
<li><i class="fa fa-windows"></i> Witamy</li>
<li><i class="fa fa-dropbox"></i> Usługi</li>
<li><i class="fa fa-user"></i> Realizacje</li>
<li><i class="fa fa-user"></i> Etapy </li>
<li><i class="fa fa-stack-exchange"></i> O nas</li>
<li><i class="fa fa-whatsapp"></i> Kontakt</li>
</ul>
</div>
<!-- <div class="social-media hidden-sm hidden-xs">
<ul class="nav navbar-nav">
<li>
<i class="fa fa-facebook"></i>
</li>
</ul>
</div> -->
</div>
</div>
</nav>
You don't need the wrapping div#bs-example-navbar-collapse-1s for a navbar to work.
And wrap a link tag around the image to redirect it to your homepage.
Update:
Issue 1) There are limitations to how many items Bootstrap can show in a navigation bar. Please check the docs and read the limitations.
Issue 2) I have fixed the code. Please ensure that jQuery and bootstrap JS files are loaded.
Issue 3) I cannot recreate the issue. It seems related to the logo size. Can you post a jsFiddle?
Updated Here is the fixed 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="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="//www.your-any-webste.com/"><img src="img/ico2.png" class="img-responsive" alt="logo"></a>
</div>
<ul class="nav navbar-nav collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<li><i class="fa fa-windows"></i> Witamy</li>
<li><i class="fa fa-dropbox"></i> Usługi</li>
<li><i class="fa fa-user"></i> Realizacje</li>
<li><i class="fa fa-user"></i> Etapy </li>
<li><i class="fa fa-stack-exchange"></i> O nas</li>
<li><i class="fa fa-whatsapp"></i> Kontakt</li>
</ul>
</div>
</nav>
Related
So basically, I took my friends website template which works on mobile and changed things and now use the template. Although, I am unable to open the mobile menu bar.
Here is the following code for the navbar
<div class="contact-bar">
<div class="container">
<div class="row">
<div class="col-sm-8 align-left">
<head>
<link rel="icon" type="image/ico" href="favicon.ico"></head>
<ul>
<li><i class="fa fa-phone" style="vertical-align: middle; font-size: 19px;"></i> (416) 824-5864</li>
<li><i class="fa fa-envelope"></i> topspintennisstringing#gmail.com</li>
</ul>
</div>
<div class="col-sm-4 align-right">
<ul>
<li><i class="fa fa-instagram" style="color: #000000;"></i></li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class='container'>
<div class="navbar-header">
<button type="button" id='navbar-toggle' class="navbar-toggle collapsed" 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>
<div class="brand">
<img src="assets/img/logofinal.png" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
<li>Services</li><!--
<li>Conditions</li>
<li>Contact</li>-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
</div>
I don't know what the problem can be because I directly copied the code although it does not work. Also, when I uploaded his website, it also did not work. There is also no bootstrap version in the bootstrap.min.css file. I also use xampp to host the site while developing.
Thank you for reading this post!
My html markup is:
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<!-- navbar-header -->
<nav class="collapse navbar-collapse navigation" id="navbar-collapse">
<ul class="nav navbar-nav menu">
<li>Home</li>
<li>Features</li>
<li>Lifestyle</li>
<li>Travel</li>
<li>Music</li>
<li>About</li>
<li>Contact Me</li>
</ul>
</nav>
</div>
<!-- navbar-collapse -->
<div class="col-sm-4 navigation" id="social-icons">
<ul class="menu">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-tumblr"></i>
</ul>
</div>
<!-- social-icons -->
</div><!-- row -->
</div>
<!-- container -->
</nav>
While resizing window, the lists stack probably because i have used the grid system.
But what I want to achieve is that the responsive menu(the three lines) be pulled to the left and the icons remain at their place.
I am trying to learn web development on my own. Any help/suggestion would be appreciated.
Edit 1:
After using media query to set the position of the icons to relative, i have achieved this.
I want the icons to be on the right side and the menu to be on the left side.
set position:relative to the parent div then Try with this
#media (max-width:767px){
#social-icons {
position:absolute;
top:15px; /*or whatever you need*/
}
}
Try with the code snippet
.navbar-toggle {
background: #000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.navbar-toggle {
background: #000;
float:left;
}
#social-icons {
position: absolute;
top: 15px;
right: 15px;
}
</style>
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<!-- navbar-header -->
<nav class="collapse navbar-collapse navigation" id="navbar-collapse">
<ul class="nav navbar-nav menu">
<li>Home</li>
<li>Features</li>
<li>Lifestyle</li>
<li>Travel</li>
<li>Music</li>
<li>About</li>
<li>Contact Me</li>
</ul>
</nav>
</div>
<!-- navbar-collapse -->
<div class="col-sm-4 navigation" id="social-icons">
<ul class="menu">
<i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-instagram"></i> <i class="fa fa-pinterest"></i> <i class="fa fa-heart"></i> <i class="fa fa-google-plus"></i> <i class="fa fa-tumblr"></i>
</ul>
</div>
<!-- social-icons -->
</div>
<!-- container -->
</nav>
<!--/.nav-collapse -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I have the following code
<div class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<h1><img src="images/logo.png" alt="logo"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li><i class="fa fa-2x fa-facebook"></i></li>
<li><i class="fa fa-2x fa-twitter"></i></li>
<li><i class="fa fa-2x fa-youtube-play"></i></li>
</ul>
</div>
</div>
</div>
When I run it in normal mode - it does this..
but when I go into mobile mode - the icons get weirdly aligned.
It becomes like so
How can I make it so the icons are aligned left or right in the mobile mode (when it gets collapsed)
This is what you are looking for
.navbar-brand img{
max-height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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" href="#">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1000px-Google_2015_logo.svg.png" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-2x fa-facebook"></i></li>
<li><i class="fa fa-2x fa-twitter"></i></li>
<li><i class="fa fa-2x fa-youtube-play"></i></li>
</ul>
</div>
</div>
I don't find any problem check the snippet, if you want to show the url I can check it.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<h1 style="padding:0px;margin:0px;line-height:20px;;"><img src="http://scholar.google.it/intl/it/scholar/images/1x/googlelogo_color_270x104dp.png" style="height:40px;" alt="logo"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li><i class="fa fa-2x fa-facebook"></i></li>
<li><i class="fa fa-2x fa-twitter"></i></li>
<li><i class="fa fa-2x fa-youtube-play"></i></li>
</ul>
</div>
</div>
</div>
I'm trying to get a navbar-brand setup on my navbar, but the link's just get pushed to the left and a navbar-brand is nowhere to be seen.
<nav class="navbar navbar-default navbar-fixed-top" id="override">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand navbar navbar-default navbar-fixed-top" href="#">Alpha Creations</a>
</div>
<div id="navbar navbar-default navbar-fixed-top">
<ul class="navbar-default navbar-fixed-top navbar-nav nav" id="override">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-cogs"></i>Services</li>
<li><i class="fa fa-briefcase"></i>Portfolio</li>
<li><i class="fa fa-money"></i>Pricing & Packages</li>
<li><i class="fa fa-comments-o"></i>Customer Reviews</li>
</ul>
</div>
</nav>
Edit:
The links were just a matter of CSS but the branding still doesn't show up
Thanks Xufox, i'm not entirely sure how to properly post the markup
I am currently experiencing an issue with Bootstrap where the toggle navbar button does not want to work when it is clicked.
I have searched around trying to find a solution yet none of these seem to be working.
<nav class="navbar navbar-inverse 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="#">PC Service Manager</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><i class="fa fa-home fa-fw navfa"></i>Home</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa fa-sign-in navfa"></i>Login</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>