I tried without success to modify hovering effects on navbar. The idea is to make appear a small rectangle when I hover link (vertically centered). The rectangle should be smaller than the total height of the navbar.
Right now, I get a strange effect on hover link and dropdown doesn't work anymore
i created a bootply of my problem
Here, You need to add <span> tag in <a> tag. also, need to some modification in css.
HTML
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><span>Home</span></li>
<li><span>About</span></li>
<li><span>Contact</span></li>
<li class="dropdown">
<span>Dropdown <b class="caret"></b></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
CSS
.navbar-default {
background-color: #FFFFFF;
}
ul.nav > li > a span
{
height: 28px;
display: inline-block;
line-height: 28px;
padding-right:15px; padding-left:15px;
}
ul.nav > li > a:hover span
{
background-color: #f0f0f0 !important;
border-radius: 6px !important;
}
ul.nav > li > a{padding-right:0px; padding-left:0px;}
also, Check it bootply
You have to change the height as shown below for your ul.nav
ul.nav > li > a:hover
{
background-color: #f0f0f0 !important;
border-radius: 6px !important;
height: 35px;//Change according to your wish
margin-top:5px;//You can add this too
}
Check here Bootply
Related
I'm looking for creating a new project Template in order to convert Wordpress Template to Bootstrap Template.
I'm working on navbar and I'm getting an issue with responsive-design and toggle-navigation
When I'm in laptop device, my navbar is well-defined as I want. But, with smartphone device for example, the toggle-navigation doesn't display my navbar as I would like to get. Especially with navbar-left and navbar-right.
Laptop device :
Smartphone device :
I would like to get in smartphone view all elements aligned vertically and it's not the case for www.coe.int and languages with glyphicons
This is my HTML script :
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><a id="coe" href="http://www.coe.int">WWW.COE.INT</a></li>
</ul>
<ul class="nav navbar-nav navbar-middle">
<li><a class="active" href="#">EUROPEAN PHARMACOPOEIA</a></li>
<li>PHARMEUROPA</li>
<li>OTHER PUBLICATIONS</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Languages</li>
<li><a><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
And my CSS part :
body {
font-family:sans-serif;
font-size: 1.25em;
}
/* ######################## */
/* HEADER PART */
/* ######################## */
header{
background-color: #e8e8e8;
}
header a{
color: #a5a5a4;
}
/* Bootstrap Stuff */
nav.navbar.navbar-default.navbar-static-top {
background-color: #e8e8e8;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
a#coe {
font-weight: bold;
text-decoration: none;
}
ul.nav.navbar-nav.navbar-middle > li > a:hover {
background-color: #1b7eac;
color: black;
transition: all 0.2s;
}
ul.nav.navbar-nav.navbar-middle > li > a:focus{
background-color: #1b7eac;
color: white;
transition: all 0.2s;
}
Could you help me to find a solution ?
My reputation does not allow me to comment unfortunately as this certainly be a comment.
But have you tried simply altering the text size using media queries to get your desired result?
--EDIT-----
I am assuming you already have the toggle button already working.
In which case If you wish to align them vertically you can use the bootstrap operator
col-sm-4 (for three items vertically aligned)
col-sm-3 (for 4 items vertically aligned)
Which will give each element their own space and align them vertically.
But remember you need to have a container then row then this property like so:
<div class="container">
<div class="row">
<div class="col-sm-4">item here</div>
<div class="col-sm-4">item here</div>
<div class="col-sm-4">item here</div>
</div>
</div>
I hope this helps you!
I want to fix the logo on the navigation bar , I want to either increase the height of navigation bar and fix it without adjusting the image size amd When i shrink the website to mobile view , The Logo is seen below the collapse button .
Preview of the website (http://threeguys.us/works/testing.html)
testing.html
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Rates</li>
<li>Employee</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
style.css
.jumbotron
{
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
}
.container
{
padding:0px;
}
.navbar
{
height: 60px;
background-color: transparent;
border:0px;
padding-top: 0px;
}
.navbar-header
{
width:70px;
background-color: transparent;
}
ul
{
padding:0;
}
.call_button
{
margin-top : 428px;
}
.content
{
background-color: white;
padding-top:0px;
}
.footer-nav
{
text-align: center;
}
.text_order
{
background-image: url(images/text_order/rectangle.jpg);
text-align: center;
padding: 5px;
}
.text_order p
{
font-size: 20px;
}
.footer-nav li
{
display: inline;
}
.footer-nav li a
{
padding-left: 50px;
text-decoration: none;
color: #f7ab00;
}
.footer-nav li a:hover
{
color:black;
}
Based on your question, comments and screenshots here are the following recommendations:
Remove this CSS code from style.css so collapse button is on the right (and not above the logo):
.navbar-header {
width:70px;
background-color: transparent; //don't necessarily need to remove this one but it isn't serving a purpose currently
}
To get the nav outside of the jumbotron whilst keeping the full image screen, perform the following updates:
Update testing.html to the following:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Rates</li>
<li>Employee</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
Update your style.css jumbotron class and navbar class to the following:
.jumbotron {
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
margin-top: -80px; //include this account for the height of the navbar and it's margin
}
.navbar {
height: 60px;
background-color: transparent;
border: 0px;
padding: 0 120px; //the 120px value will push the logo and menu nav closer together. You will need to update your collapse breakpoints though. Adjust as you see fit.
}
If I haven't answered all your questions please comment below so I can update my answer.
Modify the flow of your HTML. Avoid putting nav inside .container.
Use a structure like this
This will put the logo inside the header as well as put it before the collapse button in mobile view.
I have created navigation in center with below code HTML and CSS code
HTML Code
<nav class="navbar navbar-inverse navbar-fixed-top navbar-inner" role="navigation">
<div class="container">
<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">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>PROFILE</li>
<li>BUSINESS SOLUTIONS</li>
<li>PRODUCTS</li>
<li>PARTNERS</li>
<li>CAREERS</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS code
.navbar .nav, .navbar .nav > li { float:none; display:inline-block; *display:inline; /* ie7 fix */ *zoom:1; /* hasLayout ie7 trigger */ vertical-align: top; }
.navbar-inner { text-align:center; }
It looks like this
But I was looking like Home on active and hover. How can I do that
I was looking of small red underline when menu is selected and same thing when I hover mouse on it.
Try this ,
.nav li.active a,.nav li:hover a{
background:none !important;
box-shadow:none !important;
}
Working Demo
Updated Code
.nav li.active a span,.nav li:hover a span{
border-bottom:1px solid red;
display:block
}
Updated Fiddle Demo
So with the code you have provided I did this. If you want to make any changes just let me know I will make the necessary changes. The key idea is to use:
border-bottom
and
li:hover
properties.
Here is the fiddle:
http://jsfiddle.net/L7x85dp5/
I am learning bootstrap but i have problems. Website looks normal on computer screen but not on phone. My navbar is not very responsive. Look at this: http://gyazo.com/38234d9e9d9e9dc5dc81903427bb455b . IMG is going under the navbar. What should I do?
website is here: http://www.maesepp.tk
This is my navbar code:
<!-- Navigation -->
<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="#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>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right pull-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Avaleht
</li>
<li>
Teenused
</li>
<li>
Meist
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="peamaja.html">Galerii
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Peamaja</li>
<li>Saunamaja</li>
<li>Transport</li>
<li>Laaksaare sadam</li>
<li>Privaatrand</li>
</ul>
<li>
Kontakt
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
And this is my css:
.navbar .nav > li > a {
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
float: none;
line-height: 19px;
padding: 9px 10px 11px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: white;
font-size: 1.2em;
}
.navbar-inverse{
background:rgba(0,0,0,0.2);
border-radius: 5px;
border-bottom: none;
}
#media only screen and (max-width: 766px) {
.collapsing, .in {background-color: #f7f7f7;}
.collapsing ul li a, .in ul li a {color: #555!important;}
.collapsing ul li a:hover, .in ul li a:hover {color: #f1f1f1!important;}
}
Add this to your css and it will prevent the navbar from overlapping your image:
#media (max-width: 768px) {
body {
margin-top: 50px;
}
}
BUT it will still go under your navbar when you scroll (obviously) so if you wnt to prevent that too, just remove the opacity of the navbar on mobile like this:
#media (max-width: 768px) {
.navbar-inverse {
background:rgba(0,0,0,1);
}
}
If I understand the question correctly, you mean that the logo appears under your navbar, just increase the margin of the logo (css "img#teenused" at line 164)
http://i.stack.imgur.com/AOWEW.jpg
:)
I m fiddeling around with my bootstrap fixed bottom navbar..
its working kinda ..
But my navbar links wont go justified .. i tried everything i could think about..
i want to have it responsive soo the code i m currantly having (60px padding) is just the best i came up with, - looks soo aweful if it resizes.. :(
thx a lot!!!
<!--NAVBAR-->
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<li class="active"><a class="navbar-brand" href="#"><img src="Bilder/grafik4.jpg" type="picture/jpg"/></a></li>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>F</li>
<li>Z</li>
<li>V</li>
<li>Ns</li>
<li>Englisch</li>
<li class="dropdown">
Kontakt und Impressum<b class="caret"></b>
<ul class="dropdown-menu">
<li>A</li>
<li>Kontakt</li>
<li class="divider"></li>
<li>Webseitengestaltung</li>
<li>Foto und Film</li>
<li class="divider"></li>
<li>Copyright 2014</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--NAVBAR ENDE-->
the custom css is (other than that i used the bootstrap 3 one):
`
.navbar-brand {
float: left;
font-size: 18px;
height: 50px;
line-height: 20px;
padding-left: 40px;
padding-top:5px;
text-decoration: none;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: transparent;
color:black;
text-decoration:underline;
}
.navbar-default .navbar-nav > li > a {
color: grey;
text-decoration: none;
width: 100%;
padding-left:60px;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
size: 60px;
margin: 14,82% 0 0 10%;
}
.navbar-default {
background-color: #FFFFFF;
border-color: #E7E7E7;
}
.dropdown-menu > li > a {
color: grey;
}
.dropdown-menu> li > a:hover,
.dropdown-menu> li > a:focus {
background-color: transparent;
color:black;
text-decoration:underline;
}
`
Check this solution (if I understand correct what you want). JsFiddle:
I just replaced <ul class="nav navbar-nav"> with <ul class="nav custom-menu nav-justified">.
The nav-justified is provided by bootstrap.
Also I made few modifications to your css.
HTML:
<!--NAVBAR-->
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<li class="active"><a class="navbar-brand" href="#">
<img src="http://placehold.it/20x20" type="picture/jpg" /></a>
</li>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav custom-menu nav-justified">
<li>F</li>
<li>Z</li>
<li>V</li>
<li>Ns</li>
<li>Englisch
</li>
<li class="dropdown">Kontakt und Impressum <b class="caret"></b>
<ul class="dropdown-menu">
<li>A</li>
<li>Kontakt</li>
<li class="divider"></li>
<li>Webseitengestaltung</li>
<li>Foto und Film</li>
<li class="divider"></li>
<li>Copyright 2014</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--NAVBAR ENDE-->
CSS:
.navbar-default .custom-menu > li a {
color: grey;
}
.dropdown-menu > li > a:hover {
color: white;
}
.custom-menu > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-default {
background-color: #FFFFFF;
border-color: #E7E7E7;
}
.custom-menu > li > a:hover {
background-color: transparent;
color:black;
text-decoration:underline;
}
.navbar-default .dropdown.open {
background-color: #eee;
color:black;
text-decoration:underline;
}
.nav>li>a{
padding:15px 0;
}
EDIT:
JsFiddle
To make dropdown menu as before add few things:
Add id="menu" for ul element:
Add new css class. It's need to align to center menu items when they are collapsed:
.navbar-nav{
margin:inherit !important;
}
Add javascript that will replace custom-menu class to navbar-nav class when toggle button is visible; otherwise it will do opposite thing.
$(function () {
$(window).resize(function () {
changeMenu();
});
changeMenu();
function changeMenu() {
if ($(".navbar-toggle").is(":visible")) {
$("#menu").removeClass("custom-menu").addClass("navbar-nav");
} else {
$("#menu").removeClass("navbar-nav").addClass("custom-menu");
}
}
});
Not sure if this is what you are after, but here is a codepen with a fixed menu at the bottom of the page. It's elements are centered using text-align:center for the ul. The navbar is 'responsive' as it resizes with the window. However for a proper responsive design you should use #media queries to set specific rules for different devices.
hope this helps.