[Support request] Fixed Menu

Home Forums Support Fixed Menu

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #319653
    ambtl

    I am currently building my first site with GP. I strongly dislike “jumping headers”, I find them irritating and think they may distract from the content of the page.

    I used sticky navigation and I achieved the static header look with custom CSS. I normalized all paddings, logo dimensions even letter spacing in the menu. It took me a very long time to figure out all the selectors. But it worked. The header was perfectly static and not jumping. I was happy. Happy with the static header, and generally very happy with the theme.

    Then came the update. And it broke my header. Facepalm. I corrected the paddings, logo size, etc. But there is some weird whitespace appearing and dissappearing when scrolling.. I am too tired to continue right now.

    I found an old thread about fixed header: https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579 but it doesn’t seem to work correctly in the current version.

    What is currently the best way to achieve a perfectly static header? I suppose there is an easier way than normalizing all paddings…

    The main reason I decided for GP was the timeless design. Fixed headers are classic, they’ve been around since the 90s and the funny “frames” that were used back then. Jumping headers changing their size and look draw the attention of the visitor to themselves, and therefore distract from the content, in my opinion.

    It would be great to have this simple setting to choose a fixed header in the theme’s options (desktop/mobile), so that people don’t need to come up with custom CSS which can break after an update.

    Cheers!

    GeneratePress 1.3.46
    #319657
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The sticky navigation/logo code was vastly improved in the latest update. Of course, I can’t account for any customization made to the original code, so things like this can happen.

    Any chance you can link me to your site so I can see the issues?

    #319668
    ambtl

    EDIT: I think now this will work: https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579 ,
    but sticky navigation must be disabled and all paddings must be adjusted again.
    It would be good to have a one-click option in the settings. And I hope it won’t break after an update.

    #319675
    Tom
    Lead Developer
    Lead Developer

    Yup, that will do the entire header instead of just the navigation. It most likely won’t be an option, as making the entire header sticky typically takes up too much space on the page, especially on mobile.

    An update won’t mess that code up 🙂

    #319804
    ambtl

    I want the entire header sticky, with no transition effect, just like it was done with frames more than 20 years ago. Modern displays are big enough to accommodate for that. How much space does one need for content on a modern display? Pages are easily scrollable, some 20px more in vertical resolution don’t matter. I find a static header much better than jumping elements at the top of the page.

    The code from the other post caused complications with the admin bar. Different padding settings worked for me either in admin mode or anonymous mode, but not in both scenarios.

    My old method with tweaking the sticky CSS perhaps wasn’t so bad. I changed some values and added some new things to adapt it to the current theme version…

    .sf-menu {padding-right: 30px;}
    .site-logo img, .sticky-logo {height: 40px; padding: 25px 0 25px 20px;}
    .header-image img {height: 40px !important;}
    .inside-navigation {padding: 25px 0px 25px 10px; height: 40px !important;}
    .navigation-logo img {height: 40px !important; padding: 0px 0 0px 40px !important;}
    .nav-float-right, .is_stuck.main-navigation ul {letter-spacing: 0;}

    .main-navigation .navigation-logo {padding: 0;}
    .sticky-enabled .main-navigation.is_stuck { box-shadow: 0 0px 0px 0px rgba(0,0,0,.2);}

    .navigation-search {margin-top: 80px; }
    .navigation-search, .navigation-search input { height: 60px;}

    My menu is on the right, logo on the left.
    It still doesn’t work properly, because between the site header and page header some small whitespace seems to appear after I scroll down just a little. Between the update this approach with a little different values worked perfectly. I am too tired now to fine-tune it.

    Honestly, the lack of a simple fixed-header option is a disappointment for me.

    #320059
    Tom
    Lead Developer
    Lead Developer

    A fixed header simply hasn’t been a popular request over the years, which is why it hasn’t been implemented. If anything, the trend these days is smaller screens and phones, which is why people are going for more streamlined approaches.

    I can absolutely help you achieve what you’re wanting though, I just need to see what you have so far.

    #330219
    ambtl

    Thank you for your response Tom. I managed to solve it myself. I am always glad when I can achieve something on my own, even when there are simpler ways to achieve the same. I’m not a big fan of taking support’s time to fix simple issues, especially when my site is not yet ready or online :)…

    At first, I tried to make the sticky header CSS emulate a fixed header behavior. It worked, but the CSS got longish and I realized that it was more likely that such a complicated CSS setup might not survive another update.

    So, I used the method from this thread:
    https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579

    It was messing with the WP admin bar (that’s why I hadn’t used it first), but as far as I can tell, simply removing “top: 0” fixes that. I do have a messed up admin bar area in mobile view, but it is not so important, because I won’t edit the site on mobile devices.

    This method affects also the page header area, in ways I don’t fully understand yet. I compensated by changing some paddings in the content area. Now it is all fine when I use a full-width page headers. I noticed that contained page headers require different values to compensate for the fixed header, but I probably won’t use them.

    All in all, it does work and I do have the kind of header that I wanted for this site (at least until the next update). However, I hadn’t expected that a basic thing like a static header would require jumping through hoops.

    There are only 3 kinds of headers: disappearing, fixed and sticky. It is my opinion that a good premium theme should cover all the basic layout options (Just like content/sidebar or sidebar/content/sidebar etc. for the content area).

    In other areas: content / footer, GP covers all layout options and now I know that I will be able to achieve any layout I might need. Excellent, exactly what I was looking for! But as for the header, I honestly cannot say that I am a happy camper, Tom.

    Yes, I achieved what I had wanted for the current site, but the solution is not part of the theme, so there is always some worry that an update might break things.

    Also, I see a limitation if I wanted to go for a transparent header like this (which I find quite elegant):

    http://www.kriesi.at/themes/enfold-2017/
    or this:
    https://my.studiopress.com/themes/infinity/#demo-full

    As far I can tell, making the header fixed with the above method, means that setting transparent header won’t work as intended. The page header merges with the site header and then they are both “fixed”. It does what it says: “merged” and “fixed” :), but the end effect is not how most people would want it… With a sticky header it does work, though, the page header disappears under the site header when scrolling.
    Perhaps there is some trick to make “fixed” and “transparent” work at the same time?

    To sum up, I achieved what I wanted for the current project but now I understand there might be some limitations for future projects. Everything in GP is great, except the header options. I would be a very happy camper if the header options were developed and upgraded in the future, as an add-on or otherwise. Of all the areas in a site, headers must be the thing which is most difficult to customize outside of the theme, at least for most webmasters.

    Cheers
    Tom

    #330305
    Tom
    Lead Developer
    Lead Developer

    I appreciate the feedback, and I’m glad you were able to achieve the look you were going for.

    The two examples you linked to are actually quite easily achieved in GP if you use the navigation as your header: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

    Then using the method you found (https://docs.generatepress.com/article/merging-the-page-header-site-header/), you can make it turn transparent, and go back to colored when it becomes sticky.

    Either way, I agree that more header options are needed. Thanks!

    #330322
    ambtl

    Indeed! I am playing with it in a sandbox, and it works well! Thanks a lot, Tom 🙂 But man, getting there is not very straightforward 🙂 This might be an even better way to achieve fixed headers than I am using now…

    I see one potential issue in one scenario, though, but perhaps there is a workaround as well. That scenario is using a white-background header after scroll. Typically, with a transparent header you’ll want a bright logo and bright menu font-color, usually white. Dark colors rarely work well. Then, if you want to use a white header background after scroll, the logo and font-colors should be swapped for darker versions. In GP it works with fonts, but not with logo. There is an option to upload another logo, but as far as I can tell, it will always replace the default one. So it can’ bet swapped on scroll.

    At least I can use a transparent/dark header combinations! That’s great!

    Still, my favorite solution would be uploading a global before-scroll logo and a global after-scroll logo, as well as defining the header colors globally, rather than on each page. 🙂

    Cheers,
    Tom

    EDIT: I see one more issue, it cannot be used on pages without a page header option, such as archives. In such cases the fixed-header behavior is also lost. The header disappears on scroll.

    #330807
    Tom
    Lead Developer
    Lead Developer

    That definitely complicates things – it would require a different logo added in for the sticky menu specifically. That is do-able with some code: https://generatepress.com/forums/topic/change-logo-media-source-file-when-sticky/#post-304545

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.