Nav bar pushes down bottom bar items in header set to cover screen

Support
#1

Hi!

EDIT FIXED 1. I’m struggling trying to make my bottom bar items show when the header is set to cover the screen. User now has to scroll in order to see the bottom items.

  1. Please tell me the exact settings in the header to make the sticky nav to be hidden until scroll reaches the first section with ID #upplevelse.

Please see images below.

http://dev.svartklubben.com/

<3 Thanx!



#2

Hi @Lobsterass,

You are on the right direction. Please try this exact settings:

Hope this helps.

#3

Hi!

Thanx. Almost there. :slight_smile:

  1. The first section #upplevelse has 4 different responsive versions, see image. The trigger doesn’t work when they all have the same ID http://dev.svartklubben.com/#upplevelse . When they have different ID:s, trigger doesn’t work on all of them. Is the only solution to make 4 different responsive headers :grimacing:? Open for ideas.

  2. How do I avoid that the header bottom bar items (KONTAKT + SOCIAL ICONS) show over the sticky nav, like in second image?

#4

Hey @Lobsterass,

  1. Instead of giving an ID of the first section, add .x-main as a selector in the trigger selector field, this will avoid the issue of responsive versions of your first sections.

  2. You can use the Trigger Offset option to avoid the header bottom bar, try increasing the value:

Let us know how this goes!

1 Like
#5

Works perfectly! Thanx!

I do have the same issue with a header button, though. I’m guessing I should select ID for the URL, right? What’s the correct way to insert .x-main there?

<3

#6

Hey @Lobsterass,

Yes you should enter the ID in the button’s URL field. Try adding #x-main in the URL field of the button and then in the header JS section add the following code:

jQuery(document).ready(function($){
	$('.x-main').attr('id', 'x-main');
});

Since there is no ID associated with the .x-main container, the above code will assign an ID to it. Please note that this is only a workaround and it may not work as intended so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Don’t forget to clear all caches including your browser’s cache after adding the code. Thanks!

1 Like
#7

Awesome! It works beautifully for now at least. Thanx!
<3

#8

You are most welcome. :slight_smile:

1 Like
#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.