I ran into a problem with CSS and can't solve it. Currently I try to rework my page (http://backlight.around-the-globe.info/) and would like to style the dropdown menu on the top. My goal is to make the flyout transparent and leave the rest at it is (Africa should be white, Hurghada semi-transparent). . This is what I've got so far but it makes the whole nav bar transparent.
nav ul, nav li, .page__tray ul.menu-item-has-children li {
background-color: rgba( 255, 255, 255, 0 );
}
.menu-item-has-children ul.sub-menu li {
background-color: rgba( 255, 255, 255, 0 );
}
I know this code is wrong but I don't get the right solution.
So looking at your issue following solution should work:
You need to include the below CSS:
.primary-menu { background:white; }
Changed Opacity value from 0 to 0.67 giving it a semi-transparent look:
.menu-item-has-children ul.sub-menu li {
background-color: rgba(255, 255, 255, 0.67);
}
Related
I have the following rules
.homeSearch li {
background-color: rgba(144,178,59, 0.8);
background: rgba(144,178,59, 0.8);
color: rgba(144,178,59, 0.8);
}
But when i try to override the background color on the hover of the li, because the background color that i give is again in rgba, the override keeps also the previous colors.
.homeSearch li a:hover, .homeSearch li a.active{
background-color: rgba(40,65,113, 0.8) !important;
background: rgba(40,65,113, 0.8) !important;
}
CSS should be (no need !important):
.homeSearch li:hover,
.homeSearch li.active{
background-color: rgba(40,65,113, 0.8);
background: rgba(40,65,113, 0.8);
}
I'm trying to make a Bootstrap menu like this one https://makr.com/
I´m doing ok, but I haven't figured out how I can make it completely transparent one hover.
As you can see in the fiddle below there is always some shade of grey in the dropdown when I hover.
I really don´t know what more I can do... I've been googling and searching for a solution all yesterday and this morning and I'm really stuck now.
can anyone take a look at the fiddle and advise me, it would be very much appreciated
The only colour that should be in the menu is the
.navbar-default {
background-color: transparent; border-color: transparent;
}
.navbar-default :hover {
background-color: rgba(248, 248, 248, .7); border-color: rgba(231, 231, 231, .7)
{
on hover
https://jsfiddle.net/dadihall/5zzcq2t5/22/
thanks in advance
Dadi
Try this:
.navbar:hover {
background: rgba(248, 248, 248, 0.7) none repeat scroll 0 0 !important;
}
.navbar-default *:hover{
background:transparent !important;
}
see fiddle.
Hi there please try the following css
.dropdown.full-width {
width : 120px;
background-image: transparent;
background-color: transparent;
}
.full-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
background-image: transparent;
background-color: rgba(255,255,255,0.5); //or any level of transparency
}
.full-width.dropdown > .dropdown-menu > li > a:hover {
background-color: rgba(255,255,255,0.5); //or any level of transparency
}
ello, i want to change claro's default color for datagrid heading (blue) to red. The code below works for firefox, however, i cannot achieve the same thing in explorer.
Is there a way to do it?
thank you
.dojoxGridMasterHeader {
background: rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #FF0000, #FF0000) repeat scroll 0 0 !important;
}
I've tried adding the folowing line to no avail:
-ms-linear-gradient(center top , #FF0000, #FF0000)
.dojoxGridHeader .dojoxGridCell {
background-image: none !important;
background-color: #A6BB3F !important;
}
.dojoxGridHeader .dojoxGridCell div {
color: black;
}
I wanted to add a tabbed look to the website i am building. Already did that, but now i want to change the tab color depending on which tab i am, which was also no problem, ecept for the color.
It seems that the code also uses the default background color of the menu.
My menu is contained within:
#container #menu ul li {
background: rgba(0, 0, 0, 0.8);
float: left;
position: relative;
list-style-type: none;
}
I build a class .onlink to determine which page i am, and use this to display the correct color:
#container #menu ul li a.onlink{
background-color: rgba(255, 255, 255, 0.9);
color:#000;
background: rgba(255, 255, 255, 0.9);
}
#container #menu ul li a.onlink:hover{
background: rgba(255, 255, 255,0);
}
When i hover over the menu bar, the color is correct, but when not hovering over it, the color is slightly off (gray), and seems to be a an articaft of the #container #menu ul li id.
Any suggestions on how to get the color of not hovering adjusted?
From the look of it (though I'm not entirely sure), it seems you want to have a transparent background-color, rather than a partially-transparent white background-color; that being the case then:
#container #menu ul li a.onlink {
background-color: transparent;
color:#000;
background: rgba(255, 255, 255, 0.9);
}
#container #menu ul li a.onlink:hover {
background-color: transparent;
}
The above, of course, means there is no difference in background-color between the hovered, and non-hovered, states, so the :hover rule (the second) could be entirely omitted from the stylesheet (assuming that background-color is the only property contained within that selector), to give only:
#container #menu ul li a.onlink {
background-color: transparent;
color:#000;
background: rgba(255, 255, 255, 0.9);
}
Of course, you could retain the rgba() colour notation, and simply keep the alpha (the fourth of the four numbers (the others being red, green and blue respectively) at 0 (fully-transparent), instead of 0.9 (90% opaque/almost entirely visible)):
#container #menu ul li a.onlink{
background: rgba(255,255,255,0);
color:#000;
background: rgba(255, 255, 255, 0.9);
}
try removing: background-color: rgba(255, 255, 255, 0.9);
Thanks for the input; your comment on the :hover set me on the right track. because the :hover line defines the background color. In my code i only defined the background color of the function , not of the block.
I actually added the class .onlink also to the list:
#container #menu up li.onlink{
background: rgba (255,255,255, 0.9)
}
This resulted in a correctly displayed effect.
Thanks for the suggestions.
I'm trying to figure out where the border on the horizontal menu items comes (based on a unordered list): http://developers.ttsistemi.com/clive/
I've tried everything.
I've even tried to set the border (and just in case the background, padding and margin) to none/transparent/0, to main element and it children, but I still get this annoying border (you can barely see it, but is there, between all menu items).
The site is in WordPress and uses a Required+ child theme (based on Zurb's Foundation).
I've spend something like 4 hours trying to find where this border comes from (inspecting the CSS with Chrome's developer tools) but I'm stuck. I just don't see any border setting leftover: everything that might have been set by the parent theme should be everything overridden by now.
1) For .navbar > li delete these properties that are currently set:
.navbar > li {
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; /* Delete */
border-width: 1px medium 1px 1px; /* Delete */
border-style: solid none solid solid; /* Delete */
border-color: #333333 -moz-use-text-color #333333 #333333; /* Delete */
2) Because your last <li> is selected using the :last-child pseudo-selector you must change it separately or else you'll have a border on the last menu-item. So remove:
.navbar > li:last-child {
border-right: 1px solid #333333; /* Delete */
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset,
1px 0 0 rgba(255, 255, 255, 0.2); /* Delete */
Here is the screenshot showing the missing borders/box-shadow
http://img38.imageshack.us/img38/5845/menu2b.jpg
I have take a look and just don't know what border do you want to remove, maybe the border in the menu, I found it here:
.home #container #content-wrapper #access {
font-family: 'Museo Slab';
width: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: rgba(236, 236, 236, 0.5);
margin: 0;
padding: 0;
text-align: center;
}
in app.css line 101, remove this border it won't display anymore.
In Dark's answer, I checked it too:
I think the width of nav id="access" is incorrect, it should change like this:
.eight, .row .eight {
width: 38.66667%;
}
I saw your background-image on footer make the text hard to look, I recommend you should remove it or add a space for them.