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.
Related
if you go here and add "Piept de pui la gratar" to your cart, there will be a popup.
I tried modifying the close button's CSS because I want it fully yellow (including hover and non-hover states), but it just doesn't seem to work.
I've tried setting the color and background-color. The background color seems to work, but I don't want to change it. Setting the color to yellow just doesn't seem to make it. Any help is appreciated.
CSS Code:-
a#thp-close-id {
color:yellow;
background-color: yellow;
}
Also tried:-
.thp-close {
color: yellow;
background-color: yellow;
}
I also tried flagging the color property as !important, but it didn't work.
The reason why it doesn't work, it's because you are trying to apply those styles to the wrong 'element', as the close button uses its pseudo classes, see screen:
So in order to achieve what you need, try writing this css instead:
.thp-close:before,
.thp-close:after {
background-color: #f4c001;
}
I just added my menus and that is working but they are the common blue with an underline.
So I wanted to give them another color etc.
You can do that with the .nav-item in css. But when i do that:
.menu-item{
color: #fafafa;
}
It is not showing and the inspector shows this:
I have no idea what this means but I think the browser isn't reading this.
How can I fix this problem?
I have found the answer.
The .menu-item was being overrided by a
So i did this in my css:
.menu-item a{
color: #fafafa;
}
And now it works. Thanks to everyone who was trying to help!
I cant change the colour of navbar elements elements when working with bootstrap. Every other style like font size, font weight etc works but the colour doesn't change. I've tried to style the hyperlinks within the list elements too but it doesn't change anything. Every other style seems to be working fine. It worked when I changed it in the actual bootstrap.css file but that was a little inconvenient finding that particular line of code first and then changing it the style for it. It looks like my custom css fails to override the default bootstrap css when it comes to changing the colour property in navbar. Any idea why? Thanks
Here's the code:
.nav li {
color: red;
}
Just check in your Head tag; that you have mentioned your main css file after bootstrap link.
Might be this will be the one case.
Else post your code ; i will figure out the problem.
tyr this way
.navbar-default .navbar-nav > li > a{
color:red
}
Try this :
.navbar-nav>li>a{
color:red;
}
or this
.navbar-default .navbar-nav>li>a{
color:red;
}
Try changing the code to:
.nav li {
color: red !important;
}
I cannot seem to get the sub-menu to appear on this website I built: http://website-test-lab.com/sites/mirandaparsons/
If you use Dev tools/Firebug, and check .sub-menu to display: block; then you can see that the sub-menu does appear, but not in plain sight. I've tried adding z-index to several of the menu areas with no luck.
The odd thing is, that it does appear correctly in FF on Windows?!
I haven't pasted the code here because there would be so much to copy and paste.
Any help would be much appreciated.
Thanks
I think that what you need is a background-color to .sub-menu and position relative to .nav I just tried to set it and you can see the sub menu well :
.navigation .nav {
position:relative;
}
PS : Worked on firefox 33 Mac
You need to add this to your CSS:
.navigation .nav {
position: relative;
}
This would properbly be usefull to read: http://www.w3schools.com/css/css_positioning.asp
Add this css to your stylesheet
#site-navigation.main-navigation{
position:relative;
}
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;
}