I am using bootstrap 3 navbar. But on one of my drop downs I have add a <span class="label label-success"></span>
I cannot seem to get my span inline with the links that it is connected to. Not sure what to do.
Demo here: Click on the notices link for drop down menu. http://codepen.io/riwakawebsitedesigns/pen/asqoy
.dropdown-menu {
min-width: 280px;
}
ul.nav .navbar {
margin: 0;
padding: 0;
}
.dropdown-menu li {
margin: 0;
padding: 0;
vertical-align: top;
}
.dropdown-menu li a {
margin: 0;
overflow: auto;
}
.dropdown-menu li a:hover {
background: #222222;
color: #FFFFFF;
}
.dropdown-menu li a span {
float: right;
display: block;
}
demo - http://codepen.io/anon/pen/hKJHp
.dropdown-menu li a span {
float: right;
line-height: inherit; /** set the line-height to inherit */
}
After getting some advice else where. It now works by using this css
ul.dropdown-menu > li > a {
display: block;
overflow: auto;
position: relative;
}
ul.dropdown-menu span.label {
position: absolute;
top:50%;
right:0;
transform:translate(-50%,-50%);
}
Related
I do not know css and it seems hard to display a menu through my self-hosted wordpress site theme in the mobile version. The idea is to use the following code:
#sidebar-primary { display: none; }
Though seems that nothing happens when I add it. Is there a way to hide this element? Below is th whole code when the mobile version is present. Thanks
#media only screen and (max-width: 767px) {
.wrap { max-width: 300px; }
#branding {
float: left;
width: 100%;
position: relative;
}
#sidebar-header {
width: 100%;
margin-bottom: 10px;
}
.featured-wrapper, .aside, .content-wrap, #content, #sidebar-subsidiary .widget, #respond { width: 100%; }
.featured-post h2.entry-title a {
font-size: 12px;
line-height: 1.4em;
padding-right: 15px;
bottom: 87px;
}
.featured-post .byline {
bottom: 63px;
padding: .25em 15px .25em 1.3em;
}
.home.singular .byline { font-size: 10px; }
.menu-toggle {
display: block;
width: 100%;
}
#menu-primary {
float: left;
clear: both;
width: 100%;
margin-top: 10px;
}
#menu-primary .menu, .menu ul {
float: left;
width: 100%;
}
#menu-primary ul li {
clear: left;
display: block;
padding-left: 0;
background: none;
}
#menu-primary ul li a {
font-size: 20px;
margin-left: 0;
padding: 12px 15px;
}
#menu-primary li li a { font-size: 18px; }
#menu-primary li ul, #menu-primary li li { border: none !important; }
#menu-primary li li a:hover { background: none; }
#menu-primary ul li ul {
display: block !important;
float: left !important;
visibility: visible !important;
}
#menu-primary li ul {
display: block !important;
position: relative !important;
top: 0;
left: 30px;
}
#menu-primary ul li li ul { left: 30px !important; }
#menu-primary li:hover ul, #menu-primary li.sfHover ul {
display: block !important;
top: 0 !important;
}
#menu-primary li:first-child ul { left: 0; }
#menu-primary .sf-sub-indicator { background: none !important; }
#menu-secondary .sf-sub-indicator { background: none !important; }
.hentry {
width: 100%;
margin-right: 0;
}
.page-template-front .hentry:hover .read-more, .archive .hentry:hover .read-more, .search .hentry:hover .read-more { display: none; }
.page-template-front .hfeed-more .hentry {
float: left;
width: 100%;
margin-right: 0;
}
.comment-list li li { padding-left: 0; }
#sidebar-primary, #sidebar-secondary, #sidebar-subsidiary {
width: 100%;
clear: left;
}
#footer-content, #menu-subsidiary {
width: 100%;
margin-bottom: 20px;
}
#menu-subsidiary .menu { float: left; }
#menu-subsidiary li {
background: none;
float: none;
padding-left: 0;
margin-bottom: .4em;
}
#menu-subsidiary li a {
font-size: 10px;
line-height: 2.5em;
}
textarea { width: 96%; }
}
If it is not working then it looks like the style for mobile devices are defined in different #media query
Mostly max-width : 320px #media query is used for mobile devices
For mobile devices max-width : 320px just check if it is there and add styles in that query
#media only screen
and (max-width : 320px) {
/* Styles */
}
and more information on #media queries can be found here and here
Did you try adding !important to your style?
#sidebar-primary { display: none; !important}
Are you sure that you have not missed any other
#media only screen and (max-width: xyz px)
May be
#media only screen and (max-width: 767px)
style are not calling.
Check with other #media tag if exists in css.
The right way to force the element to not be displayed is to use the css below:
#sidebar-primary { display: none !important;}
semi-colon after !important
Even if you set the display to none it will still appear when you inspect the dom element. To remove it entirely you need to use jquery or javascript the triggers on document ready that removes the element.
$(document).ready(function(){
if($(window).width() < 767){
$('#sidebar-primary').remove();
}
})
Hope this helps
I am trying to center an a within a li in a navigation menu. IT is not working. Here is my relevant css:
#access ul li ul {
position: absolute;
background-color: #fff;
border-top: 4px solid #2980b9;
top: 55px;
left: 0px;
width: 190px;
}
#access li:hover
{
background: #2980b9;
}
#access a {
display: block;
margin-left: auto;
margin-right: auto;
}
Any thoughts on this?
For the HTML see the nag bar in http://phasetransfercatalysis.com
You need the element to be explicitly sized for that trick to work.
a{
dispaly:block;
margin-left:auto;
margin-right:auto;
width:40px;
}
http://jsfiddle.net/Zyw6y/2/
You have two options at least.
First option, set a width to your a like so
#access a {
width: 60%;
}
Second option, you can rework your code and set text-align: center on the parent which is the li, and make the a inline-block so that it follows the orders from li to be aligned centered.
#access li {
text-align: center;
}
#access a {
display: inline-block;
}
<style type="text/css">
.sf-menu { line-height: 1.0; margin:0px}
.sf-menu ul { position: absolute; top: -10px; width: 10em;list-style-type: none; }
.sf-menu ul li { width: 100%; }
.sf-menu li:hover { visibility: inherit; }
.sf-menu li { float:; position: relative; }
</style>
In float: how can change to left or right when culture change from rtl to ltr ?
The semantically correct way is to set the correct direction attribute and then test it in CSS.
If you already set the direction in the html tag (as this example on W3.org does), then the CSS would look like:
.sf-menu { line-height: 1.0; margin:0px}
.sf-menu ul { position: absolute; top: -10px; width: 10em;list-style-type: none; }
.sf-menu ul li { width: 100%; }
.sf-menu li:hover { visibility: inherit; }
.sf-menu li { float:left; position: relative; }
html[dir="rtl"] .sf-menu li { float: right; } /* <<< here */
I have a problem with hover on this site I'm doing. The menu is ok in all pages, except the home. What is kinda awkward, 'cause I'm just using php include to change the content, and the header, menu and footer are always the same.
In Firefox and Chrome it's ok, but the problem is that when I mouseover the menu on IE9 it has a displacement, like the image:
example
http://i74.photobucket.com/albums/i265/_k_ps_/exemplo.gif
I think it's something with the display: block, but I don't know how to fix it and make the menu work properly :(
Here is the HTML:
<div id="menu" class="group">
<ul>
<li id="menu-01"><span>Home</span></li>
<li id="menu-02"><span>A Empresa</span></li>
<li id="menu-03"><a href="galeria_representacao.php?image=0">
<img src="images/representacao.jpg" class="menu-head" onMouseOver="this.src='images/representacao-hover.jpg'" onMouseOut="this.src='images/representacao.jpg'"></a>
<ul class="menu-body">
<li>Teste1</li>
<li>Teste2</li>
<li>Teste3</li>
<li>Teste4</li>
<li>Teste5</li>
</ul>
</li>
<li id="menu-04"> <span>Serviços</span></li>
<li id="menu-05"><span>Projetos</span></li>
<li id="menu-06"><span>Novidades</span></li>
<li id="menu-07"><span>Contato</span></li>
<li id="menu-08"><span>E-mail</span></li>
<li id="menu-09"><span>Login</span></li>
</ul>
</div>
And the CSS:
#menu {
width: 834px;
height: 44px;
background-image: url(../images/menu-up.jpg);
display: block;
}
#menu ul {
width: 834px;
height: 44px;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: absolute;
}
#menu ul span {
display: none;
}
#menu ul li {
list-style: none;
display: block;
float: left;
position: relative;
}
#menu li ul {
position: absolute;
display: none;
z-index: 12;
}
#menu li ul li {
clear: both;
position: relative;
margin: 0;
padding: 0;
background-color: #0676c4;
width: 157px;
height: 40px;
font-family: Helvetica, Verdana, sans-serif;
font-size: 14px;
}
#menu li ul li a {
clear: both;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding: 10px;
margin: 0;
display: block;
}
#menu li ul li a:hover {
background-color: #87c5f1;
height: 20px;
margin: 0;
}
#menu ul li, #menu ul a {
margin: 0;
padding: 0;
text-decoration: none;
height: 44px;
display: block;
}
#menu-01 {
left: 0px;
width: 75px;
}
#menu-01 a:hover {
background-image: url(../images/menu-down.png);
}
#menu-02 {
left: 0px;
width: 112px;
}
#menu-02 a:hover {
background: url(../images/menu-down.png) -75px;
}
#menu-03 {
background-image: url(../images/representacao.jpg);
left: 0px;
width: 157px;
z-index: 11;
border: 0;
}
#menu-04 {
left: 0px;
width: 103px;
}
#menu-04 a:hover {
background: url(../images/menu-down.png) -344px;
}
#menu-05 {
left: 0px;
width: 108px;
}
#menu-05 a:hover {
background: url(../images/menu-down.png) -447px;
}
#menu-06 {
left: 0px;
width: 113px;
}
#menu-06 a:hover {
background: url(../images/menu-down.png) -555px;
}
#menu-07 {
left: 0px;
width: 101px;
}
#menu-07 a:hover {
background: url(../images/menu-down.png) -668px;
}
.menu-head {
border-width: 0;
}
Can somebody help me?
I put your code (and modified it a bit) in a jsfiddle.
The problem, from what I see, seems to be with the 3rd element, which has a child ul.
From what I see from there, you have a problem with your CSS :
This CSS style
#menu ul {
width: 834px;
height: 44px;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: absolute;
}
Affect this HTML element :
<ul class="menu-body">
Which you probably don't want to. (fixed here)
But I'm not sure it's your error, the code you supplied needs the images, and I do not have them...
Also, all your left:0px are useless.
If you want a better answer, you'll have to enhance your question (and/or the jsfiddle!). :-)
i have two buttons in menu on mouse over the button change image to another image but on mouse out it remains back to its original image what i want to do is to when i click this button it stat should be active so that one can know that which page he is visiting now.
my code is
#menu
{width: 628px;
height: 69px;
padding-left: 380px;
}
#menu ul { list-style: none;}
#menu li { display: inline;}
#menu a { float: left;
width: 107px;
height: 28px;
display: block;
}
#menu a:hover { width: 107px;
height: 28px;
}
#emailUs
{ display: block;
width: 107px;
height: 28px;
background: url("../images/add_1.png") no-repeat 0 0;
}
#emailUs:hover
{
background: url("../images/add_h.jpg") no-repeat 0 0;
}
and the html code is
#menu
{
width: 628px;
height: 69px;
padding-left: 380px;
}
#menu ul {
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
float: left;
width: 107px;
height: 28px;
display: block;
}
#menu a:hover {
width: 107px;
height: 28px;
}
#emailUs
{
display: block;
width: 107px;
height: 28px;
background: url("../images/add_1.png") no-repeat 0 0;
}
#emailUs:hover
{
background: url("../images/add_h.jpg") no-repeat 0 0;
}
Note: my images are seperated images not a sprite image.
you can see the demo what i want to achieve (www.daniweb.com)
Send a varible from program which page you are on. And add a class active or inactive and css the class
for eg :
Home
My Account
Now give background-image for the class selected menu so only the home image will have the active background . If you are not using sprite then do like this
<li id="home">Home</li>
<li id="myaccount">My Account</li>
then call
#home .selectedmenu{
background-image:url('homeselected.png');
}
To send variable
<?php
$menuSelected ='home';
?>
Home