I would like to try out the logo similar to adobe hanging from the navabar. but I couldn't do it using bootstrap.
Any thoughts?
http://jsfiddle.net/EFTTp/1/
HTML:
<div class="navbar navbar-static-top">
<div class="navbar-inner"> <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="brand" href="index.html"> <img style="height:50px;" src="http://kpv.s3.amazonaws.com/static/img/logo.jpg"></a>
<div class="nav-collapse collapse">
<ul class="nav pull-left">
<li class="active">Home
</li>
<li>Pricing
</li>
<li>FAQ
</li>
</ul>
</div>
Check this DEMO
try this css:
Try position absolute.
Give position relative to the parent div and give position absolute to child div.
.navbar-inner{
position:relative;
padding-left:70px;
}
.navbar .brand {
position: absolute;
left: 0px;
top: 0px;
width: 50px;
background: #f00;
margin-left: 0px;
padding: 10px;
}
Related
I am working on bootstrap home page. I wanted to add a floating ribbon image (Buy Now) just like:
http://cohhe.com/demo/sky/sky-directory/ website.
I tried to add it into my webpage but it does not appears. I know that I have to use Fixed and Top Property in CSS but I am not getting the image only. I added the buy ribbon link below form. May I added it into a wrong place. I am new to Bootstrap.
Code:
#buy-now-ribbon {
/*background: url(images/ribbon.png) no-repeat;*/
background: url("http://cohhe.com/demo/sky/sky-directory/wp-content/themes/sky/images/ribbon.png") no-repeat;
top: -8px;
right: 25px;
position: fixed;
z-index: 222;
width: 53px;
height: 145px;
display: none;
}
#backgroundimage {
background-image: url("https://d12dkjq56sjcos.cloudfront.net/pub/media/wysiwyg/Dubai-Skyline-Burj-Al-Arab-Big-Bus-Tours-01.17.jpg");
width: 100vw;
height: 100vh;
background-size:100% 100%;
background-repeat: no-repeat;
position: relative;
max-width:100%;
}
<html>
<body>
<form id="form1" runat="server">
<div class="container-fullwidth example2">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<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="http://disputebills.com">
<img src="images/layout/check.png" style="width:451px;height:36px;" class="img-responsive" alt="dubaiexporters.com"/>
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Home
</li>
<li>
Advertise
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Exhibitions
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
Trade fairs in U.A.E
</li>
<li>
Trade fairs worldwide
</li>
<li>
Add Your Event
</li>
</ul>
</li>
<li>
Memberships
</li>
<li>
About us
</li>
<li>
News
</li>
<li>
Contact us
</li>
<li>
Partners
</li>
<%-- <li></li>--%>
<li></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<div id="backgroundimage"></div>
</div>
</form>
</body>
</html>
I added this CSS:
.buy-now-ribbon{
background:url(images/ribbon.png) no-repeat;
/*background: url("http://cohhe.com/demo/sky/sky-directory/wp-content/themes/sky/images/ribbon.png") no-repeat;*/
top:0;
left:0px;
position:fixed;
width:10%;
z-index:9999;
height:150px;
background-attachment: fixed;
}
I made some changes here.I have placed div after ul class and it worked for me.
<ul class="nav navbar-nav navbar-right">
...
...
</ul>
I know your problem - a class/ID mix-up. In your CSS, you've got this line:
#buy-now-ribbon
But in your HTML, this line pops up:
<a href="http://themeforest.net/item/sky-wordpress-listings-theme/10061836?ref=Cohhe"
target="_blank" class="buy-now-ribbon"></a>
The problem you're having is your ID selector (#) does not link with your class declaration (class="buy-now-ribbon). The selector for a class is a dot/period (.). In your CSS, change the #buy-now-ribbon to .buy-now-ribbon, and it will work.
I've been trying to figure this out for a while now but I can't seem to be able to locate the problem. Whenever I click on an option from the navbar, it collapses to mobile size (currently set to 992px in bootstrap so its available on tablets), and then return to original size, which turns out that it has a height of 80px after inspecting it. It used to be fine before, but it has suddenly changed after some code edits. I have included some pictures of the problem below.
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Navigation logo and dropdown icon -->
<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="#"><img src="css/logo-dream.png" id="logo"></img></a>
</div>
<!-- Navigation Options -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="nav-appearance">
<li id="main-nav">Home <span class="sr-only">(current)</span></li>
<li id="main-nav">About Us</li>
<li id="main-nav">Services</li>
<li id="main-nav">Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Below is the CSS code I have used:
/* Main navbar design */
.navbar {
border-radius: 0px;
opacity: 0.95;
background-color: #171717;
border-bottom: 1px solid #9494b8;
margin-bottom: 0 !important;
}
.navbar .navbar-nav {
margin: 15px 0;
}
/* Navbar company logo */
.navbar-brand {
padding: 0;
}
#logo {
margin-left: 40px;
width: 171px;
height: 66px;
margin-top: 8px;
}
/* Navbar options */
#nav-appearance {
font-size: 1.7rem;
margin-right: 40px;
font-family: 'Quicksand', sans-serif;
}
#nav-appearance li {
padding-left: 35px;
}
.collapse {
padding: 0;
}
.navbar-collapse {
padding: 0;
}
/* ======= MEDIA QUERIES FOR NAVIGATION AND HOME ======= */
/* Tablets */
#media (max-width: 991px) {
#nav-appearance {
font-size: 1.7rem;
margin-right: 10px;
}
#nav-appearance a {
padding: 0;
}
#nav-appearance li {
padding: 15px 0 15px 0;
width: 80%;
transform: translateX(-50%);
top: 0;
left: 52%;
}
#main-nav {
border-bottom: 1px solid rgba(55, 55, 55, .95);
}
#logo {
content:url("home-icon-tiny.png");
height: 34px;
width: 34px;
margin-left: 13px;
}
}
/* Mobile */
#media (max-width: 767px) {
#logo {
margin-left: 13px;
}
}
Can anyone see any issues? I hope it's an easy fix.
Update:
From the page its clear that one of the JS files is interfering with the navbar elements. By setting some CSS we can remove the height change, please find below the CSS.
Codepen: here
CSS:
.navbar-brand img{
margin-top:7px;
margin-bottom:7px;
}
/* Navbar company logo */
.navbar-brand {
padding: 0;
height:100%;
}
HTML:
<!-- Navigation logo and dropdown icon -->
<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="#"><img src="css/logo-dream.png" id="logo"></img></a>
</div>
<!-- Navigation Options -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="nav-appearance">
<li id="main-nav">Home <span class="sr-only">(current)</span></li>
<li id="main-nav">About Us</li>
<li id="main-nav">Services</li>
<li id="main-nav">Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
From the images given I would say that this is a floating elements not having height issue, the solution for this is the clearfix class. so if you change the code as shown below it should not happen. also I removed the div with container-fluid class.
Code: (Do not use)
<!-- Navigation logo and dropdown icon -->
<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="#"><img src="css/logo-dream.png" id="logo"></img></a>
</div>
<!-- Navigation Options -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="nav-appearance">
<li id="main-nav">Home <span class="sr-only">(current)</span></li>
<li id="main-nav">About Us</li>
<li id="main-nav">Services</li>
<li id="main-nav">Gallery</li>
<li>Contact</li>
</ul>
</div>
I'm using the Boostrap's navbar, inside which there is an image brand (responsive) and some text (menu items). I would like to center the text within the div, but I don't know how: if I center the text in the CSS, there is more space between the left corner of the monitor and the "Home" and and less space between the last "Link" in the right and the right corner in the monitor. It's as if my code takes the div size, subtracts the image size and center the text in the remaining space.
I thought about putting a negative left margin, but because the image is responsive I don't know what value to give.
Can you help me?
http://jsfiddle.net/a001dxn6/2/
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- 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="#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="#"><img src="official_logo.png" /></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">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li class="dropdown">
Specialità <span class="caret"></span>
<ul class="dropdown-menu">
<li>
</li>
<li>La pizza napoletana</li>
<li>Le specialità della casa</li>
</ul>
</li>
<li>Menu</li>
<li>Eventi</li>
<li>Gallery</li>
<li>Contatti</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
CSS
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar-default {
background-color: transparent;
border-color: darkorange;
text-align: center;
}
.navbar-brand > img {
max-height: 100%;
max-width: 100%;
}
[fixed] Just add CSS: .navbar-brand { position: fixed; left: 1vw; }
can't really test with the fiddle, since there's no image.
have you tried removing text-aling: center from .navbar classes
and adding:
.dropdown, .dropdown-menu{
text-align: center;
}
? let me know if it works.
I'm attempting to preserve the position of two menu element (Home icon and Foo) that render as desired on large devices:
But are displayed as rows on a mobile device (obscuring content):
Is there a way to force these two menu items to display to the right of the Brand menu and on the same 'row'?
Sample: http://www.bootply.com/Fjq7ZXSDXc#
You can create a separate div inside the navbar-header: See example Snippet.
.navbar-header .nav-icons {
padding-top: 12px;
position: absolute;
display: inline-block;
top: 0;
}
.navbar-header .nav-icons span {
padding-left: 5px;
padding-right: 5px;
font-size: 20px
}
.navbar-header .nav-icons a {
color: #fff;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation">
<div class="container-fluid">
<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" rel="home" href="#" title="Help"> Brand</a>
<div class="nav-icons">
<a href="#"> <span class="glyphicon glyphicon-home"></span>
</a>
<a href="#"> <span> Foo</span>
</a>
</div>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-1">
<!-- Non-collapsing right-side icons -->
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<!-- /.container -->
Try to add this in your .css
.nav-collapse .nav > li {
display: inline-block;
}
I have a bootstrap navbar like follows
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><i class="fa fa-upload"></i>link1</li>
<li>link2</li>
<li><i class="fa fa-random"></i>link3<span class="label label-info">1</span></li>
</ul>
</div>
Current scenerio looks like follows
Is it possible the 1 bubble is directly under the text buy sell online...Currently its even going out of the navbar
So that it didn't interfere with the flow, on small viewports the element is position absolute, that's because the link in the navbar is a block and I didn't want to mess with it. On larger viewports, it centers below the text. Needs a wrapper to do this.
Demo: http://jsbin.com/gozumi/1/
HTML
<header class="navbar navbar-static-top navbar-default" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" 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>
Brand Name
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><i class="fa fa-upload"></i> link1</li>
<li>link2</li>
<li><i class="fa fa-random"></i> Some Words Go Here<span class="label-wrap"><span class="label label-info">1</span></span></li>
</ul>
</nav>
</div>
</header>
CSS
.navbar-nav .label-wrap {
position: absolute;
right: 15px;
top: 8px;
height: 10px;
}
#media (min-width:768px) {
.navbar-nav .label-wrap {
clear: both;
float: left;
height:auto;
position: static;
width: 100%;
text-align: center;
margin-top: -10px;
padding-bottom: 10px;
}
}
it's simple!
put your label inside your ancor:
from:
<li><i class="fa fa-random"></i>link3<span class="label label-info">1</span></li>
to:
<li><i class="fa fa-random"></i>link3 <span class="label label-info">1</span></li>
http://jsfiddle.net/cfvbea19/