- This topic has 7 replies, 3 voices, and was last updated 2 years, 12 months ago by
.
-
Posts
-
I have a top bar with a button activated. But when I scroll, the primary navigation just overlaps the button a bit. How to solve that? Please advise.
Also, I want to align the top bar on the mobile screen correctly. All the top bar items seem messed up on mobile view. The button overlaps with the email link and the social icons also just touching the get quote button. Please advise how I can style them correctly on mobile with proper margins I want them to be visible like this on mobile.
Line 1: Email: email@email.com
Line 2: My phone number
Line 3: Get a Quote button
Line 4: My social media icons.
Please help.
Customer Support
Hi there,
Any chance you can link us to the page in question?
You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-informationLet me know 🙂
Link added. Thanks for quick response.
I have a top bar with a button activated. But when I scroll, the primary navigation just overlaps the button a bit.
Looks like you are already using this CSS:
nav#sticky-navigation { top: 39px !important; }Have you tried increasing it to 51px which is the height of the top bar?
Let me know 🙂
Thanks for your reply. That fixed the issue of overlapping. I am facing 2 more problems;
1. I have added font awesome icons for the call and email in the top bar. These icons are visible when I log in to Wp-admin but are gone when I log out and preview the website in an incognito window. Please advise how to resolve that.
2. Om mobile view, the I see the top bar elements layout as following
line 1: email@email.com
line 2: phone number Get Quote buttonSo it seems like all the elements of top bar are shown inline on mobile view. I want to show each one on seprate line like below;
line 1. Email with icon.
line 2. phone with phone icon.
line 3. Get Quote button.Thank You
Customer Support
For issue 1, it’s not something that GP can control, I can see that the icon has been added, but it does not load the script from fontawesome. It’s better to reach out to Fontawesome’s support and try clearing/disabling your cache plugins.
For issue 2, try adding this CSS:
@media(max-width: 768px) { .top-bar .inside-top-bar { flex-direction: column; row-gap: 5px; } }That worked for me. thank you very much.
Glad to hear that 🙂
- You must be logged in to reply to this topic.
