Home › Forums › Support › Header optimization for desk top and mobile, add padding to pics in content
- This topic has 13 replies, 3 voices, and was last updated 4 years ago by David.
-
AuthorPosts
-
February 23, 2020 at 11:12 am #1174594Logan
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 logoOn mobile header
I would like for the header to include, Logo – CLickable Phone number – MenuIn 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.
February 23, 2020 at 6:19 pm #1174772TomLead DeveloperLead DeveloperHi 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 ๐
February 29, 2020 at 1:28 pm #1180860LoganCheck – menu items are lined up on desk top header
March 1, 2020 at 1:37 am #1181091TomLead DeveloperLead DeveloperAwesome.
So, to add your phone number to the mobile header:
1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Chooseinside_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 ๐
March 1, 2020 at 7:11 am #1181428LoganAdded the hook, the number is visible when I minimize the screen on desktop, but not visible on a cellular phone
(844)863-3279March 2, 2020 at 12:18 am #1181914TomLead DeveloperLead DeveloperHi there,
I’m seeing it on my phone. Have you tried clearing the browser cache on your phone?
March 2, 2020 at 11:38 am #1182648LoganOk I’m seeing it on the phone, how can I center the # and make it click to call?
March 2, 2020 at 1:58 pm #1182748DavidStaffCustomer SupportHi 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; }
March 3, 2020 at 12:37 pm #1183980LoganPerfect thank you, last question
In content of pagesAll 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.
March 4, 2020 at 1:49 am #1184421DavidStaffCustomer SupportDo 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 Containedhttps://docs.generatepress.com/article/header-element-overview/
March 5, 2020 at 11:05 am #1186234LoganI 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.
March 5, 2020 at 1:49 pm #1186389DavidStaffCustomer SupportAah ok – so select the Group Block and from its toolbar you have the option to select Wide Width – click that again to deselect it.
March 5, 2020 at 3:02 pm #1186422LoganPerfect thank you all for your help!!!
March 6, 2020 at 5:20 am #1186855DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.