[Resolved] Header optimization for desk top and mobile, add padding to pics in content

Home Forums Support Header optimization for desk top and mobile, add padding to pics in content

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1174594
    Logan

    Please help!
    I have looked at all forums and tried multiple options without success. It could be that I’m new to coding, so please bear with me and break down the exact steps for how I can accomplish the following. IE –
    go to elements, click add hook/layout/etc., Add this code to the box, click this hook in the drop down menu, add this setting to display, Go to the CSS settings in the customize layout, or go to simple css,

    basically please explain the exact location to make the modifications and the exact code to enter.

    I really need some explicit instructions on this. Thanks in advance and sorry for my apologies for being such a noob.

    Questions.

    On desktop header
    How do I position menu items to be in line with the logo, but only on a single line, no stacking.
    I would also like a sperate button for a phone number that can call out, positioned above the menu, but below the top of the page, in the same font as the menu but in bold
    Remove excess padding from top and bottom of header logo

    On mobile header
    I would like for the header to include, Logo – CLickable Phone number – Menu

    In content
    All pictures are pressed against the edges, I would like for all of them to be slighlty off the edges. Hopefully there is a global fix for this.

    Thank you in advance.

    #1174772
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Let’s work through one thing at a time.

    First, let’s get the desktop header working as you want.

    Try adding this CSS:

    @media (min-width: 769px) {
        .site-logo {
            float: left;
        }
    
        .nav-float-right .header-widget {
            top: 0;
            margin-top: 45px;
        }
    
        .header-widget p {
            margin-bottom: 0px;
            font-size: 12px;
        }
    }

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

    You also need to remove empty lines above the phone number in your header widget at the moment.

    Let me know if that works or not 🙂

    #1180860
    Logan

    Check – menu items are lined up on desk top header

    #1181091
    Tom
    Lead Developer
    Lead Developer

    Awesome.

    So, to add your phone number to the mobile header:

    1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
    2. Choose inside_mobile_header as your hook.
    3. Add this as your hook content:

    <div class="mobile-bar-items">
        Your phone number here.
    </div>

    4. Set the Display Rules to “Entire Site”.

    Let me know 🙂

    #1181428
    Logan

    Added the hook, the number is visible when I minimize the screen on desktop, but not visible on a cellular phone

    (844)863-3279
    #1181914
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m seeing it on my phone. Have you tried clearing the browser cache on your phone?

    #1182648
    Logan

    Ok I’m seeing it on the phone, how can I center the # and make it click to call?

    #1182748
    David
    Staff
    Customer Support

    Hi there,

    your HTML should look like this to create the link ( although iOS will automatically create one):

    <div class="mobile-bar-items mobile-call-cta">
        <a href="tel:+8448633279">(844)863-3279</a>
    </div>

    Then add this CSS to center it in the space between logo and hamburger:

    .site-logo.mobile-header-logo {
        margin-right: unset !important;
    }
    
    .mobile-call-cta {
        margin: auto;
    }
    #1183980
    Logan

    Perfect thank you, last question
    In content of pages

    All pictures are pressed against the edges, I would like for all of them to be slightly off the edges. Hopefully, there is a global fix for this.

    #1184421
    David
    Staff
    Customer Support

    Do you mean the image above the Posts ?
    If so go to Appearance > Elements and edit the Header Element set to Display on Posts and set the Container to Contained

    https://docs.generatepress.com/article/header-element-overview/

    #1186234
    Logan

    I mean the pictures in the content, not above the posts

    For example, if you go to https://www.floodzonerestoration.com/mold-removal-and-remediation/ and go to the content under the header and hero image, the 1st picture on the left has no margin on the left side where the main container meets the gray background. I want to have some padding for all similar pictures on the website.

    #1186389
    David
    Staff
    Customer Support

    Aah ok – so select the Group Block and from its toolbar you have the option to select Wide Width – click that again to deselect it.

    #1186422
    Logan

    Perfect thank you all for your help!!!

    #1186855
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.