[Support request] sidebar responsive settings

[Alina]

Hi

Im sorry for any spelling or grammar mistakes but i speak german..
I could not find any answer to my problem, i try to explain:

For all mobile devices, I want to show my three sidebar-containers before the “normal” content-container.

How can I do that? I have no idea about css, php and stuff…

My homepage isn’t ready so i put it on maintenance mode.

Thanks in advance
Alina

[David]

Hi there,

which sidebars do you have displayed? Left or Right or Both?

[Alina]

right

[David]

Try this CSS:

@media (max-width: 768px) {
    .right-sidebar #content {
        display: flex;
        flex-direction: column;
    }

    #right-sidebar {
        order: -1;
    }
}

[Alina]

Great! Thank you!
Can I choose on which pages I put the sidebar first?
There are some pages it isnt necessary to have the sidebar on top.

[David]

How many pages will not have the sidebar above? And are they of a certain type e.g Archive pages?

[Alina]

4 pages
I dont get the type-question, im sorry.
They are all in the primary navigation “fundtiere” and those in the dropdown.

[David]

Any chance i can get access to the Site to see ?

[Alina]

Hi again

I have to check first if its okay to deactivate the maintenance mode. I try to tell you asap.
Until then, I have two other questions I cant find the solution in the forum:

1) On the Desktop Version of my Site I have a Header Background Image and a Logo, Page Title and subtitle are both invisible. For mobile devices I want to remove the Background Image and have only the Logo floating in the middle of the Header as both Logo and Header Image.

When I take the mobile header off (customizer>Layout>Header I get the Logo I want. But i still have the Background Image behind. How can I remove that one?

2) I want to learn more about the elements / hooks that gp offers. But with the documentation on your homepage I dont understand everything. For example the page hero. Do you have other, more detailed, explanations how to use them?

Thank you very much for your help!

[David]

We would need to see the Site to really be able to help with the sidebars and also #1 request above. For #2, here are some examples with the setups explained in detail:

https://docs.generatepress.com/article/page-hero-examples/

[Alina]

Hi, here I am again.
Finally I can show the site: http://www.fledermausschutz-so.ch/

[David]

OK, so lets do something clever using Elements. First off remove the CSS i provided above from the customizer, as we’re gonna use it in a Hook Element.

1. Make sure the Elements module is activated in Appearance > GeneratePress
2. Dashboard > Appearance > Elements –> New: Hook.
2.1 In the hook we’re gonna add the CSS like so:

<style type="text/css">
@media (max-width: 768px) {
    .right-sidebar #content {
        display: flex;
        flex-direction: column;
    }

    #right-sidebar {
        order: -1;
    }
}
</script>

2.2 In the Hook drop down – select WP_head

2.3 Go to the Display rules tab. Select Location > Page and the specific Page you want the CSS applied to. Now add more location rules for each of the pages you want to include.

This will hook that CSS into the Head of only those pages. Introduction to Hooks 🙂

To remove the background image from the site header on mobile add this CSS to the Customizer > Additional CSS:

@media (max-width: 768px) {
    .site-header {
        background-image: none;
    }
}

[Author]

Posts