Header and footer design revisited.

[Dane]

Hi, this is part of my original message,

Hi there, Here is a header and footer design I desire to emulate as a template thru out my site.
https://www.hoffmancreative.com
RE; Header I want a 3 lined navicon on the left (for all viewing platforms ), a single Co. name in the Middle and a tag line on the right.
Re: Footer I want to copy this design and include social media buttons.
The given example appears to have a underlying color below the neutral overlay for the header. The same underlying color in the header is the background color in the footer.

How would you recommend I accomplish this ? I am a complete newbie.

Here was the assignment I was given by David
Hi there,

lets deall with the header first, quite tricky to do, but we can try this. First off within the Customizer:

1. Site Identity – add your Logo and Site Tag line.
2. Typography > Header – set you Site Tag line font size.
3. Color > Header – set you header background colors.
4. Layout > Slideout Navigation –> activate for both ( Mobile and Desktop )
5. Menus > Create a menu and assign this to the Slideout Navigation. Create a second Menu call it blank, do not add any menu items to it and assign this to the Primary Navigation.
6. Layout > Primary Navigation – set it to float right.

I have accomplished all but 4. Layout… (slideout Navigation is not an option i can see on my customizer,\
How can i achieve this task ?
Re: 5. I created a menu and assigned it to secondary Menu as i did not see the slideout Navigation as a choice.
I did make a blank menu as the primary navigation.

If i need to make a correction on either 4. or 5. please let me know.

Additionally, I am trying to change the WP home page from a blog to a front page.
Under dashboard:settings,readings, I have tried to set homepage to a static page under the title of HOME
in the menu provided in the drop down selects.
Even tho I have HOME listed as the top page in my menu under secondary navigation and it is visible on the load page of the url it does not come up as an option to select for Home page select . However, all the other page titles I created in the menu come up as an option. Please give directions to correct this.

I have been trying to upload a gallery block on the front page of my site it has not worked.
I hope by making the front page a static page and having the url address congruent with the front page, I will be successful in uploading a gallery to the front page. what do you think ?

Thanks !!
Dane

[David]

Hi there,

Lets take it one thing at a time.
Firstly apologies – instead of Slideout Panel- the option is now named Off Canvas Panel.

https://docs.generatepress.com/article/off-canvas-panel-overview/

If you can set that up and provide a link to the site then we can take a look at any changes you require.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dane]

ok .. I have set item 4 and 5 in canvas panel. I may alter color and sizes later.

Whats next..?

http://www.daneinternationalfineart.com

[David]

Can you do step 6:

Customizer > Layout > Primary Navigation –> Navigation Location: Float Right.

This will place all elements in the site header container, then i can figure out the CSS for positioning.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dane]

Re: step 6,
Reminder: The flowing website is my header and floater I am copying,
https://www.hoffmancreative.com

The navigation location is on the left.
I made NL float left. However, if you still want it float right for reasons to get it
on the left …lemme know
I want the tagline float right …

[Dane]

HI David,

My site will be primarily images of paintings.
On my Homepage (frontpage) I will having approx. 20 different galleries from time to time.

A gallery will consistent of 1 to four images lined up in the same aspect ratio per gallery.
However, I plan to rotate the front page galleries and show only 1 gallery at a time.
They may rotate at 12 seconds each. In keeping a Minimal theme I don’t like having a light box
underneath the gallery images. However, I may want to allow visitors to post images in social media.

These are examples of front page galleries:

http://www.daneinternationalfineart.com/?post_type=envira&p=378&preview=true

http://www.daneinternationalfineart.com/envira/home-2/?preview_id=349&preview_nonce=60aa15e1b1&_thumbnail_id=-1&preview=true

http://www.daneinternationalfineart.com/envira/306/

I have 2 questions re this goal.

1.)Is there a way to have the entire content section and gallery image fading from 1 gallery to the next and so on ( or at least just the Gallery images and not the content )…. ?
If not what alternative stylistic choices do you recommend ?

2. ) The gallery sizes and aspect ratios I am showing look great on desktop.
Is there a way to scale down the gallery image to fit a mobile screen ?

AND or, is it possible to keep the desk top design and design a different home/front page for a mobile application ?
If the ANSWER IS NO for both parts of question 2 , Can you make any suggestions in designing for both the desktop and mobile so that I can maximize my visual impact ? I don’t want to sacrifice
desktop for mobile and vice a versa .

Thanks,
Dane

[Tom]

Hi there,

It’s best to tackle one issue at a time – that way we can work through the list and get it all done.

Back to the header – it doesn’t look like the navigation is set to float right, yet. We’ll move it to the left, doing this step just adds the navigation inside the header element so we’re able to move it with CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dane]

Hi…

Please clarify.
As i mentioned I want the Navicon to be on the left.
This is the example I am duplicating.
https://www.hoffmancreative.com
As i mentioned when i set the navigation to float right and preview it …the Navicon is on the right.

Do you still want me to put the navigation to float right when the Navicon is to be in the left?

Thanks !

[Dane]

I went ahead and put Primary Navigation location to float right.
thanks !

[David]

Add this CSS:

/* 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;
    }
}

Then you can reduce the padding in the Customizer > Layout > Header to narrow its size.
And remove the Menu label from the Primary Navigation.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dane]

Thank you for the Css. I added it and looked great on desktop.
On mobile the alignment and ratios were off.

Per your direction to remove the Menu label from the PN,
I removed the blank menu i had assigned to primary navigation and when i did,
this is what happened. The navicon disappeared and the menu is messed up.
http://www.daneinternationalfineart.com

So to try and fix things.. I created a new menu called blank and reassigned to primary navigation.
It did not fix the problem…
I must not of understood what you meant by removing the menu label from the Primary navigation.
Can you clarify how to remove the menu label from PN. Is removing the blank menu what you meant
for me to do….? help
How do we get the Navicon back ?
Thanks !!!

[David]

What i meant was the Mobile Menu label, there is a field for it in the Customizer > Layout > Primary Navigation.

So you need re-create the blank menu and assign it to the Primary Nav.
Then assign your actual menu to the Off Canvas Panel

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dane]

Thank you ! The mobile menu clarification helped.

The desktop app looks great ! The mobile app not so much…
i can’t find a way to control size and position of the navicon, logo and tagline for
mobile only. Under customizer, i only find a set of controls that effect desktop and mobile apps alike. How can I adjust only mobile size and position of these three things?

[David]

In the Customizer when in mobile responsive view you can adjust ( reduce ) the header padding and the header typography site title font size.
The CSS above look for max-width property for reducing the logo.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dane]

Maybe i don’t know how to get into mobile responsive view.
I use the mobile icon at the bottom of the customizer panel.
This gives me viewing of the mobile … but the changes i make
when I view here changes the desktop as well ..
What am i doing wrong ?

[Author]

Posts