Sticky Header - Help!


#1

Me again, so on my home page my header & menu works beautifully. However, on every other page the header and menu scroll up and become invisible as you move further down the page. Where are the options to ensure the header and menu are always at the top of the page?

I have already selected Sticky Menu’s from the customisation options.

Thanks!


#2

The menu isn’t sticky on secondary pages if you’ve selected the no header mode for them. We should probably make a note of that in the options. So it will be sticky if you at least set a header image.


#3

AH ok, thanks! Another question - Is it possible (and where to find it so I could look at doing it myself) to make the header on the front page have another interaction with a scroll down.

Example:

Currently using centered option as it looks really nice on the large image screen, but takes up a lot of room when you scroll down.

I have seen other sites that then adjust based on a scroll down to inline style. Similar to your already scroll to sticky menu.

Lastly - because of the size of my logo, the menu items (in inline style) are tucked away in the top right, would be really nice to center them (vertically) with the logo - is that also possible currently?

Cheers Vlad!


#4

You can try this in a custom CSS plugin to center them vertically:


.header-wrap .row {
  display: flex;
  align-items: center;
}

For the first part we should probably wait until your site goes live as it would require a bit more custom code and I’ll need to see exactly what the outcome would be. Though this would be a good idea to implement in the theme directly, I just hope it won’t upset anybody. I’ll think about it.


#5

Cheers Vlad!

Resolved quickly and efficiently as always :slight_smile:

Unfortunately this won’t really be a live site as it needs so much custom work in regards to ordering and users, so I’m trying to mock something up close as dammit for design / UX purposes and to understand the flow and usability.

Just thought that would be cool, because it does take up a large amount of screen if you have logo and then menu (I even have 27" Retina screens) so to auto adjust in either size or change the layout to inline would look awesome! I guess if no-one else is interested don’t annoy anyone :slight_smile:


#6

Ah - One last thing. Is it possible to have different style menu’s on different pages - EG: Centered on Front Page and Inline on all others? I assume not but I wonder if there is a more simply custom CSS option?

Thanks again!


#7

This is all the code that’s added dynamically to make the menu centered (well, not in this form but I stripped the PHP bits and added what you need for the home page):


.home .header-wrap .col-md-4, .header-wrap .col-md-8 { width: 100%; text-align: center;}
.home #mainnav { float: none;}
.home #mainnav li { float: none; display: inline-block;}
.home #mainnav ul ul li { display: block; text-align: left;}
.home .site-logo, .header-wrap .col-md-4 { margin-bottom: 15px; }
.home .btn-menu { margin: 0 auto; float: none; }

Basically what you would need to do is set your menu to inline and add this code. Haven’t tested it though.


#8

It’s so close :slight_smile:

The only issue is now that the inline style menu is at the bottom not centered (logo is perfect). I tried the trick above but that overrides everything and resets the home menu to inline again.

There must be one little trick to set the menu to center of the row and then add the above to make the home page menu centered.

You are awesome btw!

(I feel better I forgot to use my discount code :wink: )


#9

It centers them to the original image header rather than the sticky menu - that appears to be the issue, as when the header is there it looks great, but as you scroll down it doesn’t center to the sticky menu.


#10

So this happens on the secondary pages? Not sure I can help without seeing exactly, but try to replace the first code I gave you with this:


.header-wrap .row {
  display: flex !important;
  align-items: center;
}


#11

I didn’t explain it clearly :slight_smile:

OK, so the code for the home page is working! It looks great, it overrides the inline style of the other pages.

However, on all of the other pages the menu is now inline (awesome) but it is aligned to the center of the header image. (Not so awesome)

Using the header-wrap row you just gave me, aligns it to the center of the header menu row (what you see as you scroll down past the header image - not header image) Which is Perfect!

However, it then also “breaks” the main(home) page and makes the menu on that inline instead of centered.

null

null

Can you see the images?

So basically, a way to make the secondary pages menu inline with the menu header (not image header) without affecting the override on the Home Menu! :slight_smile:


#12

Yeah, you haven’t posted the images correctly. As I said it’s pretty hard to help without seeing. Try also adding this below everything else:


.home .header-wrap .row {
  display: block !important;
}


#13

He shoots he scores :slight_smile:

So yeah - that worked!

Thanks again, I really really appreciate this!

Sorry for annoying you and your time!


#14

Happy to help. Feel free to rate the theme if you enjoy it :slight_smile:


#15

Done! 5 Stars all the way!

Thanks again and enjoy your evening! :slight_smile:


#16

Thank you :slight_smile:


#17

I only want my logo and menu to appear at the top of “ALL” pages, but I see you have to have a header image set for this to be possible. I really don’t want there to be an image at all, just a white background behind the entire header, Is there than a way to place a white background over the image? Is it possible to create just a white image and use that as the background image, and if so, what size is recommended?