Archived topic
Header optimization for desk top and mobile, add padding to pics in content
13 replies · Started by Logan on February 23, 2020
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.
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 :)
Check - menu items are lined up on desk top header
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 :)
Added the hook, the number is visible when I minimize the screen on desktop, but not visible on a cellular phone
Hi there,
I'm seeing it on my phone. Have you tried clearing the browser cache on your phone?
Ok I'm seeing it on the phone, how can I center the # and make it click to call?
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;
}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.
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/
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.
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.
Perfect thank you all for your help!!!
You're welcome
