please am working on a transparent navbar and its background color changing on scroll. And is working perfectly fine.
But i need help in its navbar-link color changing also.Have not been able to do this.Have tried but all my effort in making the nav-link color change with the background color on scroll are not working.
Below the image of my codes...
Solution please would so much appreciate.
Related
I have a page with a black, starry background and the navbar has white text. The navbar stays at the top when you scroll, and the links of the navbar become almost invisible when they pass over other images on the page because the navbar is transparent. How can I invert the color of the text based on whatever is directly behind it?
You want to use mix-blend-mode: difference;, like here: https://jsfiddle.net/avdeoq97/
But it would be better to give your navbar a different background, like a dropshadow with a glass effect, so it can always be seen. The inverted colour alone might not be very accessible.
I took the code from https://bootstrapious.com/tutorial/sidebar/index2.html which shows a Bootstrap Sidebar. Its background is dark with white lettering. There is a nice scrollbar for the sidebar. I am being forced at work to swap my coloring so that the background is white and the letters are dark. I did it without any problems, except now I cannot see the scrollbar unless I hover over one of the menu items, then I can see a part of it.
I changed my #sidebar css from this:
background: #4CB7EF;
color: #fff;
to this:
background: #fff;
color: #0088CE;
I did not change any of the mCustomScrollbar css.
But now I can't see the dragger_bar in the scrollbar when the background is white, as shown in the attached picture. I know it's really there (over the white background), because my cursor changes from an arrow to a hand with a pointing finger.
Any ideas please?
UPDATE 1
I tried changing the mCustomScrollbar's css where it uses rgb of 255, 255, 255 (white) to 0, 0, 0 (black), but it did not work. If you cannot provide a solution, can you please provide an example that uses the Bootstrap sidebar with a white background to refer me to?
UPDATE 2
Here is the code from bootstrapious, but I cannot get jsFiddle to work with Bootstrap, but I wanted to provide the code.
Ondrej here - I'm the author of the tutorial - https://bootstrapious.com/p/bootstrap-sidebar.
There shouldn't be any need to change the mCustomScrollbar's CSS, just use a different theme when initializing it in JS.
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html
$("#sidebar").mCustomScrollbar({
theme: "minimal-dark"
});
Cheers,
Ondrej
It is happening because the colour of the custom scroll bar is white and when are changing the background colour of the sidebar to be white it is making it look like disappeared.
I really do not get this. I am making a landingpage:
Landingpage
If I look the responsive design on Iphone 5, 6 and 6+, there is a grey background behind the logos. It is also appearing under the form. The background image should go to the top. I have been looking through the code for hours, but cannot find the answer. Can anybody see why?
Just add .fullscreen {background-size:cover;}
The grey background you see is just the body color because your background image doesn't take the whole space.
I've searched this on here as well as on google and can't seem to make it work. I'm trying to put images directly on top of another. This is for the menu of the site. I've tried using the z-index, which i believe I am using wrong. So I'm trying to simply set the one image as the background of the div.
here is my current code:
first the html:
<center>
<div id="menu1">
<img id="homebutton" src="./images/newmenu/homebutton1.png">
<img id="registerbutton" src="./images/newmenu/registerbutton1.png">
<img id="aboutbutton" src="./images/newmenu/aboutbutton1.png">
now the css:
div#menu1{
background-image: url('./images/newmenu/menubar.png');
}
The background image which is the solid red bar with gradient does not appear. Here is a screen shot of the page.
as you can see the buttons load but the background does not. If someone could please tell me what I'm doing wrong it would be greatly appreciated.
Your links have images in them (with the navigation text I assume). The background of those images is going to appear over your background image, so your background image will not be seen.
Have to change the question entirely upon discovering the cause.
I have a page with a large background image. The menu and main content portions are 900px and centered. Rather than just fill the menu background with a color, I'd like to simply blur the background image. I'd also like the blurred part to move appropriately when the page is resized so I can't just blur a section of the background. How is the best way to achieve this? I tried putting a semi-transparent .png as the background to my menu div but that didn't work, I didn't see any effect. Does anyone know how to do this? Thanks.
The site that inspired the question is this one: http://www.bluespooncoffee.com
http://jsfiddle.net/MAbpx/
background: rgba(255,255,255,0.5);
This makes the background of something semi transparent because the last value is the alpha (transparency value). Adjust as needed.