<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 */
Related
What I am trying to do is to get the hover effect that puts the anchor link a bit down, but somehow it affects all the links. Can somebody point out what I did wrong here?
nav {
width: 100%;
height: 5rem;
background: red;
}
ul {
margin: 0 auto;
font-size: 0;
}
ul li {
display: inline-block;
line-height: 4.8rem;
position: relative;
}
ul li > a {
text-decoration: none;
color: #FFF;
font-family: "Verdana";
padding: .1rem 1.5rem;
font-size: 1.3rem;
display: block;
overflow: hidden;
position: relative;
transition: 300ms all;
height: 100%;
margin: 0;
}
ul li > a::before, ul li > a::after {
content: '';
width: 100%;
position: absolute;
left: 0;
transition: 200ms all;
}
ul li > a::before {
background: #FFF;
height: .5rem;
top: 0;
transform: translateY(-100%);
}
ul li > a::after {
background: #000;
height: .4rem;
bottom: 0;
transform: translateY(100%);
}
ul li::before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #CCC;
position: absolute;
opacity: 0;
}
ul li:hover > a {
padding-top: 0.6rem;
padding-bottom: 0.1rem;
}
ul li:hover > a::before, ul li:hover > a::after {
transform: translateY(0);
}
ul li:hover::before {
opacity: 0.3;
}
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</nav>
Why li:hover > a is affecting all list items?
The problem is not your :hover selector, it's the display-block on the lis. inline-blockelements align on the baseline, this means that when you add a padding-topto one of them, all the others move down as well. To fix it float the elements to the left to keep them on one line and aligned to the top:
Demo: https://jsfiddle.net/403zexop/
nav {
width:100%;
height:5rem;
background:red;
}
ul {
margin:0 auto;
font-size:0;
overflow: hidden;
li {
display:block;
line-height:4.8rem;
position:relative;
float: left;
>a{
text-decoration:none;
color:#FFF;
font-family:"Verdana";
padding:.1rem 1.5rem;
font-size:1.3rem;
display:block;
overflow:hidden;
position:relative;
transition:300ms all;
height:100%;
margin:0;
&::before,&::after{
content:'';
width:100%;
position:absolute;
left:0;
transition:200ms all;
}
&::before{
background:#FFF;
height:.5rem;
top:0;
transform:translateY(-100%);
}
&::after{
background:#000;
height:.4rem;
bottom:0;
transform:translateY(100%);
}
}
&::before{
content:'';
width:100%;
height:100%;
top:0;
left:0;
background:#CCC;
position:absolute;
opacity:0;
}
&:hover{
>a{
padding-top:0.6rem;
padding-bottom:0.1rem;
&::before,&::after{
transform:translateY(0);
}
}
&::before{
opacity:0.3;
}
}
}
}
Note: I cleared the floats by adding overflow: hidden; to the ul
"li:hover > a" is correct!
The problem is, that with changing the padding you alter the height of the element, and the parent container has to adapt and as well all other childs.
You can see it when you do not change the padding, but just the background-color of the hovered a. You will see, it is just altering the current element.
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 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%);
}
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;
}
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!). :-)