- This topic has 15 replies, 2 voices, and was last updated 2 years, 5 months ago by
.
-
Posts
-
Hi,
My client wants a fixed navigation bar, but the background color is transparent. I changed the navigation from hiding on scroll to a fixed one, but I don’t know how to change the background color on scroll. I want the navigation bar to be transparent when the website is loading (as it is now), but when you scroll, when the navigation reaches the bottom part of the slideshow, the background color should change to #224c24. There are no options for this in the settings, and I have tried to use some javascript I found on the internet to change it but it doesn’t work (probably because I don’t understand javascript at all).
Can you please help me? Thank you!
Regards,
RoxanaHi,
Thank you for your help! It works now, but it has a gray color, not the green color that I need #224c24. I saw now on the theme’s documentation that there is a custom class for a sticky header (needed to add class header-sticky and add some CSS to the header I am using) – sorry for not checking the documentation before I wrote to you. Now I don’t see the changes in header 1 – the current header of the website. I wanted to change the color myself but I didn’t find the custom CSS. Can you please change it?
After the changes you made, I saw some issues with the left/right arrows in the squares for navigation of the slider, they are gone on the desktop, and on screens below 880px, they are cut off, they are not square.
Also on the homepage, on the back end, the second section after the slideshow is not totally visible, the top part is hidden under the first section, though the margins on both the first and second sections are 0px.
Also the header/navigation on the tablets (iPad Mini, iPad Air, etc) is white, not transparent…
And another issue I found, before you made the changes, on mobile there was a lot of white space – the website was displayed on 2/3 of the screen width, on the left, and on the right side was white, and you could scroll to the right a lot (the horizontal scroll bar showed up on the bottom of the screen). I used overflow:hidden to hide the white space of the body in additional CSS, but I don’t understand where is this white space is coming from. You can delete it from the additional CSS (first row of code) and check the error. It should fit nicely to the screen width, without additional CSS.
Can you please help me with these fixes?
Thank you for your help. I appreciate it!
Regards,
RoxanaHi,
Thank you, but I still see some errors. I want the header to be transparent when the website is loading. I’ve changed header 1 and now is transparent on laptop, but on mobile and tablet is green and it is doubled, also is green on big monitors. On mobile and tablets because the header is doubled, it doesn’t display the bottom part of the slideshow – please check the mobile version (the header is not dispalyed as a layer over the slideshow, it is on top of the slideshow and it is moving the slideshow down, that’s why it cuts the bottom part).
On ipad Mini the header is doubled also, half top part is white and bottom part is green.
Also I want to edit the fixed header, and I don’t have this options – where I can find it?
About the second section, from the first page, that was under the first section – it’s still the same. Nothing chaged. I deleted the cache.
Please let me know if you can take a look again.
Thank you,
RoxanaI resolved this issue, please recheck.
If you want to help, please take a photo screenshot about this issue and send for me, I will check and try to help you.
Hi,
I checked on tablet screens and didn’t find the error you got: https://prnt.sc/rf-2ri8hCpSv
Backend: https://prnt.sc/tQmKsY0X–vg
Please delete all caches and recheck your site
You must be logged in to reply to this topic.