[Support request] Header and footer design revisited.

[David]

Make sure you have the Spacing and Typography modules activated in Appearance > GeneratePress.
Beside each of those settings you should see a mobile icon – make sure that is visible and selected.

[Dane]

under WP/Dashboard Appearance >generate press I have Spacing and typography modules activated
I do no see a mobile icon to select.
OR…
under Customizer,Active theme>generate press there is a separate category for typography but not for spacing.
In this case at the bottom of the typography panel there are icons for 3 apps, including mobile and desktop.These icons when selected let me view what the design looks like in the app selected
but the controls are not regulated to the app selected ..
These 3 icons are on the bottom line next to hide controls…

Help me find this mobile icon you are speaking of ..;)

[Tom]

Hi there,

Take a look at this screenshot: https://docs.generatepress.com/article/menu-item-height-width/

See the mobile icon on the right, next to the reset arrow? That’s the one you want to click, which will allow you to change the spacing on mobile only.

Let me know if that helps or not 🙂

[Dane]

Thanks… this article helped me change my menu size in mobile

My mobile header is too narrow. Desktop is good.
When I change PX padding in layout header Mobile responsive ..i have no response.

I am wondering if this CSS code i attached below that David gave me..
is over riding my control for header padding in mobile…
It seems he wrote the code to make media header set to auto…

Please instruct me on how to make the header height bigger …
thanks !!!

/* Make Header Flex and reverse item order */
.inside-header {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
/* Abs position logo center */
.site-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* Force nav and site title apart */
.site-branding {
margin-left: auto;
}
/* Mobile reduce logo size and site title */

@media (max-width: 768px) {
.site-logo img {
max-width: 200px;
height: auto;
}
.site-branding {
max-width: 13ch;
text-align: right;
}
}

[Tom]

Hi there,

Any chance you can show me a screenshot of what you’re seeing? It doesn’t look narrow on my side.

Let me know 🙂

[Dane]

/Users/greggross/Desktop/Screen Shot 2019-10-06 at 10.46.48 PM.png

/Users/greggross/Desktop/Screen Shot 2019-10-07 at 10.21.29 AM.png

Yes, Here are 2 screen shots .. the mobile narrow header appears when mobile header is selected off in the header customizer. The wider header appears when mobile header is selected on.

Why does this happen ?

I am not sure what mobile header on/off is for.

whether i decide to have mobile header on or off …I have design issues to fix in
either case.

The narrow header is to narrow.

The wider header displays the Navicon lower than the logo and the tag line is misplaced and
too large.

I thought I might be able to live with out tagline on mobile only and leave it on desktop.
In customizer site identity mobile responsive when I hide the tagline, it disappears for desk top as well. And the navicon moves to the right side in desktop and mobile. I want it on the left.

Please advise…THANKS !!!!

[Tom]

It doesn’t look like your screenshots attached. You may need to upload them in your Media Library and then share the File URL with me.

Let me know 🙂

[Dane]

Here are the 2 screen shots. I temporary posted them on my
site.

http://www.daneinternationalfineart.com/wp-admin/post.php?post=101&action=edit

[David]

That link is incorrect. If you have uploaded them to your Media library, visit there, click the image and copy the URL.

[Dane]

OK .. THANKS ..HERE are the urls from media library

http://www.daneinternationalfineart.com/wp-admin/upload.php?item=532

http://www.daneinternationalfineart.com/wp-admin/upload.php?item=533

[David]

Still no joy 🙂 Do you have a google drive or similar cloud share that you could upload the screenshots to and share us a public link?

[Dane]

I tried it again and copied link differently … I think this will work…
fingers crossed !

http://www.daneinternationalfineart.com/wp-content/uploads/2019/10/mobile-wider-header.png

http://www.daneinternationalfineart.com/wp-content/uploads/2019/10/mobile-narrow-header-.png

[David]

Yay 🙂
So this CSS:

/* Mobile reduce logo size and site title */
@media (max-width: 768px) {
    .site-logo img {
        max-width: 200px;
        height: auto;
    }
    .site-branding {
        max-width: 13ch;
        text-align: right;
    }
}

replace with this:

@media (max-width: 768px) {
    .inside-header {
        padding: 5px;
        align-items: center;
    }

    .site-logo {
        width: 100px;
        height: auto;
    }

    .site-branding {
        width: 8ch;
        margin-bottom: 0 !important;
    }

    .site-description {
        font-size: 10px;
    }
}

For the sticky – you’re not going to be able to use the built in one as this only applies to the Navigation and not the header. So disable that in the customizer and add this CSS:

.site-header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

[Dane]

Thanks… I sooo appreciate your help !!

I still need to tweak logo and site identity separately in desktop,tablet and mobile.

I not finding the the ability to do this in customizer site identity.
If i make a adjustment in one of these 3 categories and publish it …it makes the change
in all 3 categories.

Also,there seems to be a lock from my adjusting px. Maybe the CSS added is restricting this option in customizer ?

I want to make the logo bigger in tablet and mobile. Customizer site identity also restricted
on my getting this done.

I also want to make site identity tagline 2 px bigger in desktop and still keep it on one line.
When i put it 1 px larger than now it goes to 2 lines.

And i want to make tag line smaller in mobile and put fine art, centered under international.
Will these changes need to be in CSS now ?

so here are pics of what i have presently

http://www.daneinternationalfineart.com/wp-content/uploads/2019/10/home
http://www.daneinternationalfineart.com/wp-content/uploads/2019/10/tablet.pngpage.png
http://www.daneinternationalfineart.com/wp-content/uploads/2019/10/mobile.png

Here is what I am trying to emulate.

https://www.hoffmancreative.com
http://www.daneinternationalfineart.com/wp-content/uploads/2019/10/mobile-logo-tag-line-sizing..jpeg

Lastly, Is it possible to have the navicon like Hoffmancreative . Its 3 separate lines without
a black square behind it.

THANK YOU !!!

[David]

Replace all the CSS with this, i have commented it – so you can now change the styles / sizes for tablet an mobile separately. All desktop sizes will be controlled in the Customizer:

/* Arrange Header elements */
.inside-header {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

/* Abs position logo center */
.site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Force nav left and site title right */
.site-branding {
    margin-left: auto;
}

.site-branding {
    text-align: right;
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
    .inside-header {
        padding: 5px;
        align-items: center;
    }

    .site-logo {
        width: 150px;
        height: auto;
    }

    .site-branding {
        width: 8ch;
        /* Change width of site title */
        margin-bottom: 0 !important;
    }

    .site-description {
        font-size: 10px;
        /* change fornt site */
    }
}

/* Mobile */
@media (max-width: 768px) {
    .inside-header {
        padding: 5px;
        align-items: center;
    }

    .site-logo {
        width: 100px;
        height: auto;
    }

    .site-branding {
        width: 8ch;
        /* Change width of site title */
        margin-bottom: 0 !important;
    }

    .site-description {
        font-size: 10px;
        /* change fornt site */
    }
}

/* Make Header Sticky */
.site-header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

For the Menu toggle, you can change the Customizer > Colors > Primary Nav > Background color.

[Author]

Posts