[Support request] Header and footer design revisited.

Home Forums Support Header and footer design revisited.

Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #1024736
    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

    #1024763
    David
    Staff
    Customer Support

    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.

    #1024883
    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

    #1025017
    David
    Staff
    Customer Support

    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.

    #1025633
    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 …

    #1025668
    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

    #1025792
    Tom
    Lead Developer
    Lead Developer

    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.

    #1025825
    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 !

    #1025826
    Dane

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

    #1025981
    David
    Staff
    Customer Support

    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.

    #1026408
    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 !!!

    #1026528
    David
    Staff
    Customer Support

    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

    #1026574
    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?

    #1026577
    David
    Staff
    Customer Support

    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.

    #1026582
    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 ?

Viewing 15 posts - 1 through 15 (of 30 total)
  • You must be logged in to reply to this topic.