Customizing navbar: sticky and background color

[perisoylu]

Dear team:
I want to rearrange my navbar: currently it is transparent and not sticky when users are scrolling down on the website. I have used some CSS to achieve exactly this, but now wanted to work with a sticky navbar and one that has a solid white background. Preferably I want to achieve this: Transparant navbar with solid color when scrolling the solid color being white. Can you please let me know which elements I will have to remove from my Global CSS section in order to achieve that? I have tried it myself the past couple of days, however, was not successful.

Thanks so much!
Best!

[mldarshana]

Hi @perisoylu

Thanks for writing in! Remove your custom CSS and head over to X -> Theme Options -> Header -> Navbar and set your navbar position as fixed top.

Then to make it transparent, add the following CSS rule into your X -> Theme Options -> CSS area and change the values according to your preference.

.x-navbar.x-navbar-fixed-top {
    background-color: rgba(255, 255, 255, 0.65) !important;
}

Hope that helps.

[perisoylu]

Thank you for your reply! That’s one of the reasons why I wrote in, I don’t know which part of the CSS code to remove in order for the fixed top to actually work again and this also this is my ideal goal: transparant navbar with solid color when scrolling down (the solid color being white). I hope I was able to be more clear about that my challenge is. Thanks a lot for your help.

[jade]

Hi there,

Please note that the support we provide is mainly on the issues with the theme, possible bugs, and questions about the theme setup which excludes features that are not available with the theme out of the box. Any custom features that involves adding custom codes goes beyond the scope of our support and if we provide hints and code suggestions, it will be your responsibility to maintain the code or change it in case you want to change the current customization that is on your site. If you are not certain how to proceed with the customization, it would be best to get in touch with a developer especially if you are not familiar with the customizations.

To get you started, this is the custom code that is stopping the sticky navigation bar to work:

.home .x-navbar {
    position: absolute;
    width: 100%;
    box-shadow: none;
    border: 0;
}

Hope this helps.

[perisoylu]

Hi Jade,

Thanks for the reply. I did not know that the rules you have stated above apply to formulating questions in this forum. Is this new policy? My experience is that there are a lot of questions answered in this forum that are much more detailed than mine is and oftentimes require the user to use custom CSS code (which is provided with the answer). I never expect anyone to take responsibility for what I adjust in the code.

I just wanted to point out that what you are communicating does not match my experience and what I have observed by looking at other questions and corresponding answers I see in this forum.

Thanks a lot for your hint. It is deeply appreciated.

Best!

[christian]

Hey @perisoylu,

Custom coding was not really a part of our support service even from the beginning. Please see our Terms.

We often go above and beyond the scope of support though to help users get started with customization. But, that does not mean we will or can always provide custom code.

Thank you for understanding.

[perisoylu]

Hi Christian:

I do understand and I hear you. There is no need to go into justification and providing me with a link to your terms. I just wanted to point out what my experience and my observation with this forum is and that your way of handling the inquiries can lead to a point of view like mine. What you do with my feedback is up to you. I thought it was worth sharing it and that’s what I did.

Anyway, I am always grateful for your support. Have a great day!

[paul.r]

Hi,

Thanks for sharing your thoughts, we’ll keep that in mind.

Have a great day!