Create shortcode for only sticky header

Hey Elvin,

Yeah exactly. Not to be picky, but is there anyway we can make that fill the full header instead of stacked center? So it would be 1 line across? Also, I can't seem to get the logo in the secondary navigation to move to the left no matter what I try? Thanks again for the help

Actually I just realized I wouldn't need the secondary navigation now. But if possibly would still like to make the sticky one line instead of stacked.

This shortcode isn't exactly generated by the theme. If it's from the plugin, you should ask the plugin developer on the best practice on how to format its rendered markup.

But to help you out:

I'm not sure if this is the best practice for this plugin(perhaps they have UI for this), but if you want it to look something like this: https://share.getcloudapp.com/7KuP2YxA

Modify this CSS I've provided:

.sidx-container {
    margin-left: auto;
    margin-right: auto;
}

to this:

.sidx-container {
    width: 100%;
    padding: 20px 10px;
}

Hey Elvin,

That works fine man. Achieves the goal. I notice I need to keep the navigation on "contained" for it work properly as if its set to "full" it carries all the details (logo & menu with it). Is there a way to adjust the logo padding to the right while the header is contained, or it is pre-determined. Also, any idea why the sticky navigation won't work on mobile? menu won't work either. Sorry for the hassle

Is there a way to adjust the logo padding to the right while the header is contained, or it is pre-determined.

I'm not sure what you mean by this. "Contained" setting limits the width of your containers contents.

That means if you set the width to 1200px, the content container wrapper will only allow for width to go not wider than 1200px regardless of viewport size. Adding padding will only make other elements within the container wrap to the second line, making the layout look bad.

If what you meant was to make the logo go past its contained width, you may have to use negative margins. I don't recommend doing this though. If you need the logo to move further to the left, increase the content width and adjust the elements on the right with margins.

Also, any idea why the sticky navigation won’t work on mobile? menu won’t work either. Sorry for the hassle

Your site is using a mobile header. (Activated through Appearance > Customize > Layout > Header.

It has its own sticky option as shown here: https://share.getcloudapp.com/QwuEeObx

Gotcha on padding issue. Yeah I have since turned that on, but no luck with mobile. Menu and search in menu won't work either. Ill see if I can figure it out. Now there is a large white gap below footer as well. I won't keep you any longer. I appreciate help with the original issue. Thanks

I've rechecked your site and the mobile header seems gone.

I believe you've figured it out? Let us know if you need further help.

As for the footer gap:

It looks like it's caused by the same plugin you used for your shortcode. https://share.getcloudapp.com/X6ueYZ75

It's best to ask the plugin developer on why its being added and how to prevent it from being added.

Hey Elvin,

Yeah the mobile works on the computer when it’s selected, but not on an actual mobile device. The menu and search buttons don’t respond. I believe it’s all connected to the short code that was added in the sticky header. I’ll mess around with it and see if it can be fixed. Thanks again.

To help further: I've done checks on my android phone as well.

Everything seems to be working fine. The sticky search bar shows up, tapped buttons go to their specific links.

I've got no apple device/s to check for safari or macOS though.

No problem. :)

Thanks Elvin, I appreciate the help. I have no Android, only iOS ha, so it may possibly be an issue on that end. Thanks for checking.

No problem. Glad to be of any help. :)