-
Posts
-
This issue appears to be a side effect of top padding my navigation links so that they are aligned with the base of my logo. When scrolling, the links are slower to start moving than the page content so they overlap. How can I avoid this overlapping while scrolling and keep my links aligned to bottom, as they are now? Thanks
Website:
https://bit.ly/2Y1LN8UHey bluesbrush,
I just tried your web site and I cant see this issues happening.
Are you using a specific way because when scrolling everything trigers as should for me.Best regards,
Basilis@Basilis – The issue occurs when starting to scroll. After a period of time everything “pops” up into place but when starting to scroll from the top of the page, the navigation links get buried into the top hero image. Scroll slowly. Do you see the same thing? This happens on all my browsers. I am not able to bottom align the navigation links without this issue occurring.
Hi,
Thank you for contacting us.
Yes, you are correct. The issue is because of the extra padding to the header height. Please remove this padding or custom code and try the method described in the documentation to align the logo center.
Once you get started we can help you with any CSS required to achieve the same design.
Best regards,
Vinay@vinay – I am using the suggested approach. I used the tutorial to center the logo but the links were vertically centered and I am trying to align them to the bottom of the logo as you see on my site. I just removed the padding that I was using to try to align them, as you asked. Here are the two different approaches I previously tried to bottom align menu links. Everything looked good except for the menu links overlap page content when starting to scroll.
@media only screen and (min-width: 848px) {
#top .main_menu .menu li a {
/*padding-top: 52px;*/
}}/*—–alternate method of vertical alignment——–*/
.av-main-nav > li > a {
/*bottom: -52px;*/
/*position: relative;*/
}Hi,
Thanks for the update.
Can you provide a screenshot of the overlap issue? We can’t reproduce it on our end. You can upload the screenshot to imgur or dropbox.
Best regards,
IsmaelOMG, I am a patient man but this is getting painful. I don’t mean to be rude but the gaps are so long between the support feedback that it’s like we’re starting all over again with each comment.
You can’t see the overlap because @Vinay asked me to remove the padding that I was using to bottom align my menu links.
Here’s what the overlap looks like:
aaltomarbleinlay.com/archive/overlap/PLEASE help me restore faith in this theme’s support. I am making every effort to be as precise and clear as possible and each response feels like an attempt to just pass the issue off and buy more time. Not the enfold I’ve known, loved, and supported for many years.
I am now adding back the menu padding and it will look great until you begin to scroll, at that point the menu links start to disappear into the top image of the website. Here is what I just added back:
@media only screen and (min-width: 848px) {
#top .main_menu .menu li a {
padding-top: 52px;
}}When I submitted this ticket, I provided administrator access. It’s still valid. Please help! Sorry, very frustrating.
Is it possible to bottom align the menu links and also avoid the overlapping?
Hi,
I see. Please remove the top padding and then use this css code instead.
.avia-menu-text { top: 40%; position: relative; }The menu items’ position will be calculated based on the header height preventing them from going outside the header container.
Best regards,
Ismael@Ismael – That did it. Thank you.
- You must be logged in to reply to this topic.