In my menu when you select an item in my vertical nav you can see a little border below of the item HERE, how can I delete that border?
I tried this but didn't work too
.nav-tabs li, .nav-tabs li a {
border-bottom: none;
}
Picture of the border
https://www.screencast.com/t/BWNUP1n3
You need to remove box-shadow from class main-purple
.main-purple {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
Give the class on the main ul element like
tab-button
than style it
.tab-buttons {border-bottom: 0px !important;}
I think your problem is within #vertical-nav
if you remove all box-shadow it will remove your "border" under HERE
EDIT: After seeing the screenshot yes just replace the #vertical-nav with this:
#vertical-nav {
padding-left: 0;
padding-right: 0;
color: #fff;
}
Related
I want to remove the white edges and the black shadow from my text box in the page of https://help.penny.co/portal/en/home:
Here's what I tried:
.SearchBox__searchpart{
background-color:transparent;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
This is the input text CSS:
.SearchBox__searchpart input {
background-color: transparent;
border: 1px solid #818a91;
vertical-align: middle;
border-radius: 24px;
}
The shadow that you see is applied to #searchContainer, try this in your stylesheet:
#searchContainer {
box-shadow: none;
}
The problem is you're targeting the wrong element. The element with box shadow in the website you posted is the element with the class Header__searchLink. If you set box-shadow: none; on that element, you'll achieve nirvana.
Look at the parent of the input element and and a css box-shadow: none; there.
Next time you ask, please add more details so that you can find answers easily.
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.
Here is the design for the tabs
I need each tab to be the same width. The top green border on active tab should be over the left and right borders.
Here is the code I've written so far: http://jsbin.com/ricuzubo/1/edit
Can anyone help me?
Instead of applying border-right: none; to your anchor tag, remove that style and add margin-right: -10px to it. This will do the trick.
SEE THE DEMO and THE CODE for reference.
li a {
border: 10px solid #ccc;
margin-right: -10px;
}
li.active a {
box-shadow: 0px -10px 0px green;
}
If you can use CSS3 remove your border and add this effect using box-shadow.
Like This:
li.active a
{
box-shadow: 0px -10px 0px green;
}
Here is a FSfiddle: http://jsfiddle.net/NicoO/BcA6K/
I've solved your problem here using some jQuery and CSS.
Good Luck!
On this page, there's a menu with an automatically generated submenu under 'life'. There are some problems with the submenu (it flickers and changes size - you'll see if you scroll over it). Somehow I need to override the css that it's currently reading and make it uniform.
Any suggestions?
Thanks - Tara
Starting at line 744 of /wp-content/themes/primus/primus/style.css, you have this CSS:
#catmenu li li a:hover, #catmenu li li a:active {
background:#fff ;
width: 150px;
float: none;
margin: 0px;
padding: 0px 10px 0px 10px;
color:#ff9999;
}
Change the padding to match what it is before hover:
padding: 7px 10px
It because you have set:
padding: 7px 10px 7px 10px;
on the a:link. And then you set padding to 0, on a:hover.
Try set the same padding values for both behaviors.
I have a horizontal menu. I want to have a border around the menu (not the entire-row, only the space menu is covering). When I put border on ul, it covers the entire row, when I put border on li, it has border between menu items as well.
<ul id="menu" style = "text-align:left;">
<li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...</li>
</ul>
Here is the CSS:
ul#menu
{
padding: 0 0 0px;
position: relative;
margin: 0 0 0;
text-align: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li a
{
padding: 0px 0px;
margin-right:20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
}
Kill display: inline on the list items and float them left instead. Float the container as well, which will ensure that it's only as wiide as its contents. Finally, set overflow: hidden on the ul.
Declare ul with display:inline-block. It'll cause ul to take only space necessary to display its contents, not 100% of it.
An example
Use display: inline-block on the ul and add the border to the ul.
If you need IE6 compatibility:
#menu li {
border-top: 1px solid #000;
border-bottom: 1px solid #00;
}
You might be able to use li:first-child (I can't remember, and don't have a copy of IE6 to test with) to apply:
#menu li:first-child {
border-left: 1px solid #000;
}
But you'll likely have to add either a class-name, or id, to the first and last li elements to give them the appropriate border-left and border-right.