HomePage › Forums › Themeforest › PakrCo – Single Property WordPress Theme › Change navigation background color on scroll
- This topic has 15 replies, 2 voices, and was last updated 2 years, 5 months ago by Supporter.
-
AuthorPosts
-
March 24, 2022 at 9:32 pm #5713roraluxSupport Expired
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,
RoxanaMarch 24, 2022 at 11:17 pm #5724Hi you,
I resolved this issue, please recheck your site.
March 25, 2022 at 12:07 am #5738roraluxSupport ExpiredHi,
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,
RoxanaMarch 25, 2022 at 10:12 pm #5754Hi again,
I have just resolved all issues, please delete all caches and recheck.
March 26, 2022 at 6:02 pm #5765roraluxSupport ExpiredHi,
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,
RoxanaMarch 27, 2022 at 12:49 am #5767I 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.
March 30, 2022 at 6:05 pm #5794roraluxSupport ExpiredThis reply has been marked as private.March 31, 2022 at 10:22 am #5793roraluxSupport ExpiredThis reply has been marked as private.March 31, 2022 at 11:05 am #5808Hi there,
We have fixed all issue
please check againThanks
April 4, 2022 at 9:53 pm #5796roraluxSupport ExpiredThis reply has been marked as private.April 5, 2022 at 11:30 pm #5848Hi,
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
May 24, 2022 at 7:52 pm #6324roraluxSupport ExpiredThis reply has been marked as private.May 26, 2022 at 12:14 am #6346Ok, I resolved this issue, please recheck your menu.
May 26, 2022 at 1:28 am #6347roraluxSupport ExpiredThis reply has been marked as private.May 26, 2022 at 10:10 pm #6355This reply has been marked as private. -
AuthorPosts
You must be logged in to reply to this topic.