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
}
Related
I have two pages that the bootstrap navigation menu color is different than the rest of the pages (total three different settings).
The navigation menu is one html file (that is linked to each page).
I want to have all code on ONE css file. How would I do that please?
Thank you. Here is a sample of the code:
.navbar-default {
background-color: #65625B;
background-color: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000)";
zoom: 1;
background-color: rgba(255, 255, 255, 0.0) !important;
border-color: transparent;
border-color: #65625B;
border-color: rgba(255, 255, 255, 0.0) !important;
font-size: 12px;
}
#media(max-width:767px){
.navbar-default {
background-color: #65625B !important;
border-color: #65625B !important;
}
}
/* 3-bar button color */
.navbar-toggle {
background-color: #65625B !important;
}
/* 3-bar button hover */
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #83817b !important;
}
/* 3-bar button border */
.navbar-default .navbar-toggle {
border-color: #65625B !important;
}
Assuming each page has its own body, assign a unique ID to the page that requires a different color.
<body id="my-blue-navigation">
Then in your CSS you refer to the correct class.
#my-blue-navigation .navbar-default {
background-color: blue;
}
nav {
width: 100%;
height: 100px;
}
.navbar-default {
background-color: red;
}
#my-blue-navigation .navbar-default {
background-color: blue;
}
<body id="my-blue-navigation">
<nav class="navbar-default">
</nav>
</body>
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);
}
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 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 am using Twitter Bootstrap in my rails app. My navbar looks perfect in Firefox / Chrome / Safari (tested chrome on both a Mac & PC). In Internet Explorer, it looks ugly! Wrong colours & everything.
Any help you can provide would be appreciated. I can post whatever code would help.
Update
Here is all of the CSS where I override anything from bootstrap (brought into my app via sass-rails gem). Hopefully it pushes us in the right direction.
Note: Where I have color:#F8F8F8; below, I used to have #333. This is just one iteration of me trying to fix it. I've even tried changing the background color to #333334 as I think that my precompiler was changing #333333 to #333 (don't know for sure though)
/* Styling */
.navbar, .navbar-inner, .navbar-fixed-top, .container, #tabs .nav {
border:none;
background-image:none;
}
.navbar {
font-size:14px;
text-shadow:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
.nav {
float:right;
}
.brand {
margin-left:30px;
color:#333334;
font-family: Georgia, serif
}
.navbar-inner {
background-color: #F8F8F8;
border-bottom-color: #E0E0E0;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #333334;
}
}
.navbar .nav > li > a {
text-shadow:none;
color:#555555;
background-color: transparent;
cursor:pointer;
&:hover {
color:#E6E6E6;
}
}
.navbar .nav .active > a, .navbar .nav .active > a:hover {
background-color: transparent;
color: #555555;
}
.navbar .nav .inactive > a:hover {
color:#999999;
}
.navbar .nav > li > a.sign-in {
color:#555555;
padding-top:4px;
padding-bottom:4px;
margin-top:5px;
margin-left:30px;
}
.navbar .nav > li > a.sign-in:hover {
background-position: 0 0px;
}
.navbar .nav > li > a.active-button {
background-color: #E6E6E6;
background-image: none;
border:1px solid #cccccc;
border-radius:4px;
box-shadow: none;
cursor: pointer;
opacity: 0.6499999761581421;
outline-color: #555555;
outline-style: none;
outline-width: 0px;
text-decoration: none;
text-shadow: none;
padding-top:4px;
padding-bottom:4px;
margin-top:5px;
}
I have also tried the following (in an attempt to explicitly override anything to do with gradients from Bootstrap):
body {
color:#333334;
}
.navbar-inner {
background-image: -moz-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: -ms-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8F8), to(#F8F8F8));
background-image: -webkit-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: -o-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: linear-gradient(top, #F8F8F8, #F8F8F8);
}
.btn-navbar {
background-image: -moz-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: -ms-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8F8), to(#F8F8F8));
background-image: -webkit-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: -o-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: linear-gradient(top, #F8F8F8, #F8F8F8);
}
Yet another update
Fiddling around with the internet explorer developer tools leads me to believe the issue is this:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF333333',endColorstr='#F2222222', GradientType=0)
What is this? Do I need it? (Why does it not use the same gradients as firefox/chrome?) It comes from Bootstrap... I can try to override the colours in there because for whatever reason IE is interpreting FF333333 as that dark blue.
Turns out I was able to fix this by over-riding the default filter code generated by Bootstrap. Big thanks for Nathan and Andres! To override the code I had posted above, I added the following :
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#F8F8F8', GradientType=0)
Hope this saves some pain for somebody....
Andres Ilich commented on the OP:
"Try filter:none on your navbar (totally forgot about that), IE uses a
separate syntax to generate gradients. background-image is still not
supported by IE9 to create gradients."
After developing very painful forehead from smacking it numerous times on the desk, this is exactly what fixed the issue for me. Thanks Andres.
This happened to me too. But I found out that in CSS gradients, IE (even 9) doesn't seem to except just 3-character HEX codes. So you need to change the hex codes to 3-character instead if they aren't already (such as #CCC to #CCCCCC) so it'll work correctly in IE (only for the IE gradient CSS, not all of them).
If you could post your CSS I could see if there are any other problems. But, my problem was that #CCC was being interpreted as dark blue in IE.
From what i can tell you're using a solid color for your background in the top navbar, so you're only adding a background-color but not removing the background-image as well, so try to reset that too like so:
.navbar-inner {
background-color: #F8F8F8;
background-image:none;
border-bottom-color: #E0E0E0;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #333334;
}
Internet Explorer is quite good at messing things up what I normally do is use a separate style sheet to fix up explore without messing up the rest of my site. Paste this line of code in your web pages:
<!--[if IE]>
<link rel="stylesheet" href="styles/fix_internet_explore.css">
<![endif]-->
and modify the css to make look better on explorer, and the good part is other browsers will ignore this style sheet.
This is much more simple:
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-submenu:hover>a,
.dropdown-submenu:focus>a,
.dropdown-menu>li.active>a
{
filter: none;
}