I am using bootstrap and I am changing the color of the link on hover.
The problem is when I hover there is a slight flicker which causes the navbar height to change. Any leads on how to fix it.
Here is the demo
Link has border-bottom: 4px solid white; when you hover over it.
Give your normal li the same border.
.navbar .nav>li {
float: left;
border-bottom: 4px solid;
}
Related
I have this styling:
#bbpress-forums li.bbp-forum-freshness a:hover, #bbpress-forums li.bbp-topic-freshness a:hover {
text-decoration: underline;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
Yet, when I hover over the links:
As you can see they are still showing shadow effects. I have been able to use the aforementioned approach in other classes.
The page:
https://www.publictalksoftware.co.uk/support-forums/
Any advice appreciated. I just want it to be a underline with no shadow.
Try this:
.bbp-forum-title:hover, .bbp-forum-freshness a:hover {
background: transparent!important;
border-top: none!important;
}
Looks like it's a background color, not a box shadow.
Try to add to your class :
background: none;
border: none;
And you dont need to reset box-shadow.
So I would like to have a similar border to Google's UI in there documentation in Firebase.
https://firebase.google.com/docs/cloud-messaging/
You can see in the big blue box under the navbar there is a list of tabs. How could I achieve adding an bottom border to my tabs by also having the curved radius at the top? I understand how to use css to create a bottom border but i am clueless in how to add the top curves.
.navbar-light .navbar-nav .nav-link {
border-bottom: 2px Solid #fff;
}
okay i try to fix this with border top left and right properties:
have a look, this might help you
#example1 {
border: 2px solid #0277bd;;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
<div>Document</div>
<div id="example1">
</div>
.navbar-light .navbar-nav .nav-link::after {
border-radius: 5px 5px 0 0;
bottom: 0;
height: 5px;
}
They are actually adding a pseudo-element via ::after and customising it.
You can customise this style as per your wish.
When I use the following CSS, I go from the output of the image at the top to the image at the bottom:
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
The purpose is to have a larger hover area for the mega menu, otherwise the mega menu disappears when the mouse is between the ''Assessment'' menu and the mega menu box. However, when my padding is at 30px, all the menu items shift higher up. What would I need to add to keep this large box (the edges will be white - I put black so it is easier to see now) without affecting the rest of the menu?
edit1: the menu is generated from the pearl theme for wordpress. The .menu-border is an added css class for the ''assessment'' menu.
If we could get a working snippet it would be easier to help.
Also, there are two menus in your capture. I guess that adding the code it's the second one. Looks you're missing vertical-align property
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
vertical-align: middle;
}
I'm unsure what you're exactly looking for but have a crack at this CSS that's using the inline-block property -
.menu-border {
display: inline-block;
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
Further reading on CSS inline-block
https://www.w3schools.com/css/css_inline-block.asp
If someone ever face that problem, the solution was to replace my code with this
body .stm-header .stm-navigation__default > ul > li > a {
padding: 30px 30px;
}
I'm using wordpress twentytwelve child theme.
the nav bar has a border-top that I would like to get rid of.
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 0px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
}
however when I add it to my child theme with 0px for the border,
the navigation refuses to flick over to the menu toggle when I scale down the window.
This is just weird and I'm at a loss to the reason why.
any help would be absolutely amazing.
I have the following CSS which I'm using to create a simple hover effect for a handful of links in a navbar:
#k9nav-inner ul li:hover {
background-color: black;
border-bottom: 2px solid red;
}
It works, but the border at the bottom is pushing the entire bottom part of the navbar those 2px (in other words, the navbar's height is increasing by 2px during the hover), resulting in a noticeable popping effect when the mouse moves over/off of the links. I see how that would happen with the box model, but is there any way to counteract it so the 2px border appears, but doesn't stretch the navbar by those same 2px?
Figured it out:
#k9nav-inner ul li:hover a {
box-shadow: 0 -2px red inset;
}
this will stop that that from happening
#k9nav-inner ul li:hover {
box-shadow: 0 0 0 2px red inset;
}
it's not officially a border , but it looks exactly like one, and won't mess up the box-model sizing
EDIT :
for bottom border only, this will work
#k9nav-inner ul li:hover {
box-shadow: 0 2px red;
}
example fiddle http://jsfiddle.net/qVD8K/
In some cases it can be useful to leverage outline instead of border. Outline does not increase size of a parent container. However, I don't believe an outline can be set on a single side (e.g. outline-bottom).
outline: 2px solid red;
If you add a 2px border to the list elements when they are not hovered using the container's background color for the border then you won't see the 2px shift on hover.
#k9nav-inner ul li {
border-bottom: 2px solid white;
}
You could set transparent border to #k9nav-inner ul li or (which is beter in my opinion) set parent background color.
For example:
HTML:
<div class="sadf sd1">Some text here</div>
<div class="sadf sd2">Some text here</div>
<div class="sadf sd3">Some text here</div>
<div class="sadf sd4">Some text here</div>
CSS:
.sadf {margin:5px; background:#aaa; height:40px;width:150px;}
.sd1:hover {border-bottom:2px solid #000;}
.sd2 {border-bottom:2px solid transparent;}
.sd2:hover {border-bottom:2px solid #f00;}
.sd3 {border-bottom:2px solid #fff;}
.sd3:hover {border-bottom:2px solid #f00;}
Proper working examples is .sd2 and .sd3. As you can see they are not ideal but works fine for me.
See working example on JSFiddle: http://jsfiddle.net/mZg4N/