I do apologize but I am a beginner and I cannot figure out how to position my logo in the navbar and make everything line up correctly.
I cannot figure out how to make my logo go from this to this one
thank you for your help
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<a class="brand" href="easychip.html">
<img src="images/images/chipfixx.png">
</a>
<a href="/" id="logo">
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>How it Works
</li>
<li>Order Now
</li>
<li>About Us
</li>
<li class="dropdown">
<ul class="dropdown-menu">
Social Media <b class = "caret"></b>
<ul class="dropdown-menu">
<li>Twitter
</li>
<li>Facebook
</li>
<li>Google+
</li </div>
</ul>
</ul>
</div>
</div>
</div>
Try changing this:
<a class="brand" href="easychip.html">
<img src="images/images/chipfixx.png">
</a>
To this:
<a class="navbar-brand" href="easychip.html">
<img src="images/images/chipfixx.png">
</a>
I looked at the source code of my own bootstrap website and I'm pretty sure it should work.
Related
I am currently redesigning a website who has a two row responsive navbar , but now get stuck.
#media (min-width: 767px) {
.nav.navbar-nav {
float: right;
}
}
<div class="navbar navbar-default navbar-fixed-top">
<div class="collapse navbar-collapse ">
<ul class="nav navbar-nav">
<li class="community"><strong>Community</strong></li>
<li class="global"><strong>Global</strong></li>
</ul>
</div>
<div class="navbar-header">
<div id="button" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<a class="brand" href="#"><img src="IMAGE/Oppo_green.png" height="24" width="150" alt=""></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><strong>Home</strong></li>
<li class="dropdown">
<strong>Products</strong>
<ul class="dropdown-menu">
<li>Smartphones</li>
<li>Accessoires</li>
</ul>
</li>
<li><strong>ColorOS</strong></li>
<li class="dropdown">
<strong>About</strong>
<ul class="dropdown-menu">
<li>Press</li>
</ul>
</li>
<li class="dropdown">
<strong>Support</strong>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
<li><strong>Stores</strong></li>
</ul>
</div>
</div>
If the screen is wider than 767px it looks like this (which looks precisely what I want (check first image)...but..
when the screen is smaller than 767px (second image), the navigation menu looks like this and that is not what I want. "Community" and "global" should be displayed below under store, but how can I fix that
I would just add duplicate menu options, meaning hide the first one on tablet/phone and show the second one on tablet/phone, as so: (check bottom of second navigation for adjustment)
<div class="navbar navbar-default navbar-fixed-top">
<!-- hide this nav on tablet/phone ****************************** -->
<div class="collapse navbar-collapse hidden-sm hidden-xs">
<ul class="nav navbar-nav">
<li class="community"><strong>Community</strong></li>
<li class="global"><strong>Global</strong></li>
</ul>
</div>
<div class="navbar-header">
<div id="button" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<a class="brand" href="#"><img src="IMAGE/Oppo_green.png" height="24" width="150" alt=""></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><strong>Home</strong></li>
<li class="dropdown">
<strong>Products</strong>
<ul class="dropdown-menu">
<li>Smartphones</li>
<li>Accessoires</li>
</ul>
</li>
<li><strong>ColorOS</strong></li>
<li class="dropdown">
<strong>About</strong>
<ul class="dropdown-menu">
<li>Press</li>
</ul>
</li>
<li class="dropdown">
<strong>Support</strong>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
<li><strong>Stores</strong></li>
<!-- ****************************************************** -->
<li class="visible-sm visible-xs">
<!-- link here (or dropdown) for "Community" -->
</li>
<li class="visible-sm visible-xs">
<!-- link here (or dropdown) for "Global" -->
</li>
</ul>
</div>
</div>
I've just installed bootstrap 3 but the collapsing menu doesn't work;
The menu looks fine in a desktop screen but scaling the hole thing down the menu button doesn't show up..
Here is the code for the menu:
<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
<div class="container">
<a 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>
</a>
<a class="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
<div id=".nav-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Inloggen <span class="sr-only">(current)</span></li>
<li>Contact</li>
<li class="dropdown">
Taal <span class="caret"></span>
<ul class="dropdown-menu">
<li>Nederlands</li>
<li>English</li>
<li>German</li>
</ul>
</li>
<li class="dropdown">
Valuta<span class="caret"></span>
<ul class="dropdown-menu">
<li>Euro</li>
<li>Dollar</li>
<li>Pond</li>
</ul>
</li>
</ul>
</div>
</div>
</div><!--End container-->
</div><!--End fixedtop-->
Assuming that you've put the jquery library , and after you've put the js file of bootstrap , I can think that the problem is with the data-target.
You're targeting the element with the id "nav-collapse", and you have ".nav-collapse" as id, so you need to take off that dot.
<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
<div class="container">
<a 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>
</a>
<a class="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
<div id="nav-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Inloggen <span class="sr-only">(current)</span></li>
<li>Contact</li>
<li class="dropdown">
Taal <span class="caret"></span>
<ul class="dropdown-menu">
<li>Nederlands</li>
<li>English</li>
<li>German</li>
</ul>
</li>
<li class="dropdown">
Valuta<span class="caret"></span>
<ul class="dropdown-menu">
<li>Euro</li>
<li>Dollar</li>
<li>Pond</li>
</ul>
</li>
</ul>
</div>
</div>
</div><!--End container-->
</div><!--End fixedtop-->
Here's a fiddle, and I changed some classes and some stuff to make the menu visible. Because if you didn't have the right CSS for it, it's pretty messed up like this.
And Note that you should always refer to the bootstrap docs , and try to stick to their methods to make your menu or anything else works perfectly fine.
And I saw that you've put the class "pull-right" for the menu , there's a class called "navbar-right" that works better that just pulling the menu to the right I think.
I am trying to implement a navigation drawer theme for my website using Boostrap. I am able to convert my navbar in desktop screen size to a navigation drawer button for smaller screens. However what I am trying to achieve is get the 3 bar icons of the drawer on the left hand side and "MyName" should not be visible on smaller screen sizes. Could some one help me out?
My HTML code is:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> MyName
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li class="active">ABOUT ME<span class="sr-only">(current)</span>
</li>
<li>RESUME
</li>
<li>PROJECTS
</li>
<li>BLOG
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</div>
</body>
I have created a JSFiddle for this: https://jsfiddle.net/DTcHh/9394/
Add the following classes: hidden-xs (class="navbar-brand hidden-xs") and pull-left (class='navbar-toggle pull-left")
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> MyName
<button class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li class="active">ABOUT ME<span class="sr-only">(current)</span>
</li>
<li>RESUME
</li>
<li>PROJECTS
</li>
<li>BLOG
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
I have this navbar. It works great in regular screen width, but when collapsed, the mobile navbar button doesn't work. I've tried to find any unclosed divs and other issues but can't identify any. Thanks in advance for any help! Apologies for the beginner question
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<div class="navbar-brand" href="#">
<div class="text-center">
<img alt="nav" src="/assets/navbar.png" />
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<h4>
<ul class="nav navbar-nav navbar-left">
<!-- <li> Help </li>-->
<li> Buy </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Search </li>
<li class="dropdown">
My purchases<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li> My profile </li>
<li class="divider"></li>
<li> Items bought </li>
<li> Items sold </li>
<li class="divider"></li>
<li> Purchase history </li>
</ul>
</li>
<li class="dropdown">
Settings <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li> Edit my profile </li>
<li> Manage my profile </li>
<li class="divider"></li>
<li class="dropdown-header">GOODBYE </li>
<li> <a data-method="delete" href="/users/sign_out" rel="nofollow">Logout</a> </li>
</ul>
</li>
</div><!-- /.navbar-collapse -->
</nav>
</h4>
Clean-up your HTML and it should work fine. There are several missing close tags (/ul, /div) and the /h4 is closed at the end.
http://bootply.com/ytu2dul2yw
I have got a centered logo in my navbar and three menu categories on the side,when i reduce my resolution some categories start to disappear and when i reduce the resolution for navbar collapse things then get really messed up,the whole collapse menu is shown behind the main slider i have got.This is my code.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="height:90px;">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="row">
<div class="col-md-4">
<ul class="nav navbar-nav ">
<li class="active menu-item">
<a class="menu-link" href="#">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">About us</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Events</a>
</li>
</ul>
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/Night-club.png" title="Night-club logo" alt="Night-club logo">
</div>
<div class="col-md-4">
<ul class="nav navbar-nav ">
<li class="menu-item">
<a class="menu-link" href="#">Gallery</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Reservation</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="main-slider-simple">
<ul class="img-slider">
<li>
<img class="img-responsive" src="images/main-img.jpg" title="Night club " alt="Night club " />
</li>
<li>
<img class="img-responsive" src="images/main-img2.jpg" title="Night club " alt="Night club " />
</li>
<li>
<img class="img-responsive" src="images/main-img3.jpg" title="Night club " alt="Night club " />
</li>
</ul>
<!-- Glavni slider -->
</div>
And here is css for the menu links i have set up...
.menu-item{
margin-top:50px;
margin-left:30px;
margin-right:20px;
font-size:30px;
}
How can i accomplish normal responsivness?
Here is the jsfiddle that kinda explains my situation.
http://jsfiddle.net/cELuF/
I've changed the css for the div
.col-md-4
http://jsfiddle.net/cELuF/2/
You will be able to see what i've added in the CSS box.