Lodestar reduce header height on some pages

  • Resolved superlorel

    (@superlorel)


    4 years, 11 months ago

    Hi!
    Header height is the same on all pages on desktop view: on the homepage as well as on other product pages. This is confusing as visitors do not understand they have left the homepage and landed on another page until they scroll down.
    I would like it to be obvious that they are on another page by, for instance, reducing the height of the header space for some pages.
    I read that I could remove the header completely from specific pages, but I am not sure this is what I want so far.

    Is there a way to manage header space height for specific pages?

    Thanks!

    • This topic was modified 4 years, 11 months ago by superlorel.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi –

    The URL in the browser bar changes when you navigate to a different page off the home page. Example, https://crazymondayspirit.com/contact/

    Do you want the other pages to have a reduced or expanded header size? I”m happy to take a closer look at it.

    Thread Starter superlorel

    (@superlorel)

    Hi!

    Yes, the browser bar changes, but users do not always have a look at that and focus mostly on what they see on the screen.

    I would like the other pages to have a reduced header size, yes ??

    Thank you for your help!

    When I look at your site, the header on the homepage is actually higher than the one on other pages, have a look: https://d.pr/i/HMP6Um
    Were you already able to fix that? Or are you looking to make the difference even more prominent?

    Thread Starter superlorel

    (@superlorel)

    I really would like it to be more distinct. Depending on the screen size, the difference is not even visible without scrolling down ??
    But I did not do any action yet, so the slight difference must be a theme thing.

    Thanks!

    Thanks for confirming. Try adding this:

    /* Change the header height on pages other than home */
@media screen and (min-width: 60em){
body:not(.home) .custom-header-image {
    padding-top: 5%;
 }
}

    The current value of padding is 20%, I reduced it to 5% – you can try a bigger or a smaller value, depending on what you need. If even 0 is still too big for you, try adding a specific value like 20vh and modify that to your needs.

    I hope that helps ??

    Thread Starter superlorel

    (@superlorel)

    Hey !

    Thanks! I put i to 0% but the final result is not as reduced as I wished though (but that’s better anyway). I tried with the vh value but I fear some other code might overlap and not allow us to make it smaller.

    At least now, on most of the screens, the page’s title is visible and so visitors can see they have changed page and can scroll down to the content ??

    Thanks

    I’m glad that helped, I think if you tried to make it even smaller, you’d also need to change the header image itself as it would start to cut the image off too much.

    Thread Starter superlorel

    (@superlorel)

    Thanks ??

    • This reply was modified 4 years, 11 months ago by superlorel.
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Lodestar reduce header height on some pages’ is closed to new replies.