Site logo

Archived topic

Centering logo code affects Volume demo site - mobile responsiveness

3 replies · Started by Mark on May 1, 2019

Viewing posts 1–4 of 4

Hi,

Theme 2.2.2
GP Premium 1.8.1
'Volume' demo site from premium library
Elementor 2.5.14 (not pro version)

I've developed a site using the above. I then applied
https://docs.generatepress.com/article/centering-logo-navigation/
followed the instructions (items 1-7) to split the header menu and insert the logo in the middle.

However on adding the CSS this affects the layout and mobile responsiveness in the page hero element on both home and blog pages. The sub-text moves to the right and on viewing on mobile it squashes the text rather than stacking it nicely.

Initailly I though it could be something to do with the fact that I didn't install Volume to a totally vanilla WP site (some unknown conflict with other plugin). But I've then done a local fresh install and the behaviour is the same. Definitely something in the additional 'centering logo' CSS which is conflicting.

Thanks guys - great product and support BTW!

Hi there,

you need to edit the Header Element, you will see the first line of markup:

<div class="inside-header">

It uses the GP inside-header class to maintain the same padding as the site header, which is now being effected by the split menu CSS you added. So replace that line with:

<div class="hero-content">

and add this CSS:

.hero-content {
    padding: 40px;
}

Thanks you guys rock...

You're welcome

This archived topic is closed to new replies.