Header not shrinking

  • Resolved Valdinia

    (@valdinia)


    4 years, 4 months ago

    I need a header for desktop and a different one (with a different structure) for tablet and mobile.
    I build the desktop header. It shrinks while I scroll down and it changes color just right.
    Now I build a second section (beneath the first one) visible only on tablet and mobile. It shows correctly but it doesn’t shrink.
    I delete the first section (the one visible on desktop only). Now the header for tablet and mobile shrinks correctly, as expected.
    I put back the desktop header. The header for tablet and mobile doesn’t shrink anymore.
    I tried this also on a clean WP installation, only with OceanWP and Elementor PRO.
    is it a bug or am I doing something wrong?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Robert Wattner

    (@rwattner)

    @valdinia Hi, sorry for the delay. I manage this plugin in my free time which has been scarce lately. The plugin currently doesn’t support being activated on more than one section on a page at a time, hidden or not. I’m looking into making this a new feature in a future update.
    If you have a link I can take a look to see if I can come up with a way to get both designs you want out of a single header section.

    Thread Starter Valdinia

    (@valdinia)

    I just tried this:

    On desktop I have 3 columns:
    1) – for the logo
    2) – for the main menu
    3) – for the search form widget

    On tablet and mobile I have two columns:
    1) – for the logo
    2) – for the button that will trigger a popup containing the menu options

    Using the Advanced > Responsive settings I tried to show/hide the columns that I need/don’t need on desktop and/or tablet, but the problem is that even If I set a column to be hidden on desktop it still shows. So I still don’t have a solution.

    But I wonder, how do others solve this problem?

    Without the need to shrink the menu and logo I would create two sections: one visible on desktop and the second one visible on tablet and mobile.
    I think I’ll have to use a CSS solution only, without the Sticky Header Effects plugin

    Thread Starter Valdinia

    (@valdinia)

    I finally solved my issue:

    The responsive settings should be applied to the widgets not to columns. Now it seems so obvious, but initially I mistakenly tried to show/hide the columns

    So now I have both the search form widget AND the button (that will trigger a popup on tablet/mobile) in the third column, but while I’m on desktop only the search form widget is set to be visible. While I’m on tablet/mobile only the button is set to be visible.

    The widths of the columns are set to different values on desktop, tablet and mobile.
    So, problem solved. Thank you for your help anyway!

    Plugin Contributor Robert Wattner

    (@rwattner)

    Awesome to hear you got it figured out!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Header not shrinking’ is closed to new replies.