I have been working on this site MY SITE for a quite days.I used UBER menu plugin to display my menu in more a custom way and is working fine.But when it is displaying it shows a thin white line above the menu item.I added the following css which didn't help
border-top:none !important;
Some one please help me please.Thanks :) !!!
Try css command vertical-align as below:
vertical-align:top
Hope this may help to resolve your query.
It is a white box-shadow on #megaMenu div, to remove it use
box-shadow:none;
-webkit-box-shadow:none;
The following css have the transparent background color.
#megaMenu li.menu-item
{
background-color:transparent;
}
Apply the same menu background to this class. it will fix the issue.
#megaMenu li.menu-item
{
background-color:#606b9a;
}
Related
I want to change the background color of the of the mobile dropdown to #000000... but I can not work out which CSS class will do the job. I have tried to find in the Chrome inspect with no luck... please help.
http://goo.gl/WDmePH
This code should do it:
.site--portable .site-navigation .menu-item, .site--responsive .site-navigation .menu-item {
background-color: #000;
}
Make sure you target mobile resolutions only, using media queries.
I found one problem with menu in Twitter Bootstrap 3 (3.1.1). Tab "kontakt" is a <"li" class="active">Kontakt<"/li">
and tab "Galeria zdjęć" is a <"li">Galeria zdjęć<"/li"> (without brackets before and after li). How can I avoid this situation? http://scr.hu/2p5g/u5m8e
As You can see shadow from "Galeria zdjęć" is behind tab "Kontakt". Is it possible to change this that shadow would be before next tab?
Thanks in advance.
I think you will need to use z-index and position:relative to achieve this:
So what you need to do is add this to the elements that need this effect applied:
.button { position:relative; z-index:1; }
.button:hover { z-index:2; /* add your box-shadow code here */ }
jsFiddle demo.
I have a list using li for my nav bar. I set a border-radius on my background so that it would be rounded. Now I just need to delete the border-left of the home element. Here are the snippets of code:
HTML:
<li class="home">
home
</li>
CSS:
li.home {
border-left:0px;
}
I hope this is enough context to help answer my question. Please let me know if it isn't.
try li.home { border-left:0px !important; }
if you dont want left border dont mention it..i.e dont write border:1px solid; or boder-left:1px;..only mention the borders you need like border-right or border-top and to have rounded edge use border-top-right-radius:10px;
EXAMPLE :: FIDDLE
I'm trying to figure out how i can remove the border under the links at my website. It's both irritating and it messes up my design. So I'm asking here instead. I have been searching around Google, but I can only find "How to remove border around image links".
Can i use css to remove the borders? I have tried "border: solid 0px #000;"
But it did not work.
So if anyone could help me on this one I would really appreciate it.
If you're trying to remove the underline, add this to your css :
a {
text-decoration: none;
}
If you want to remove the underline of all the links, you can add:
a{
text-decoration:none;
}
Or if you want to remove the underline of a specified link, then you should create a css class like,
.style1{
text-decoration:none;
}
Then call this class name with the link like,
Link
It will only remove the underline of that link.
I have a link (in fact a dropdown menu link) when clicked I have a dashed border around this link.
How can I avoid this behaviour?
Thanks.
Use the CSS :focus and :active specifiers:
.yourclass:focus, .yourclass:active {
outline: 0; /*make sure no outline appears*/
}
And a little working demo: little link.
Hope this helped!
As an addendum to Chris's, answer (can't comment yet)
Make sure to also include
.yourclass:focus { outline: 0; }
to keep the outline from showing up on some corner cases where the focus remains on an element.