- This topic has 41 replies, 3 voices, and was last updated 4 years, 9 months ago by Leo.
-
AuthorPosts
-
July 7, 2019 at 2:00 pm #951479Alan
Hello
Im new to GeneratePress. Im trying to setup my header area so that I have an image on the right side of the header and text on the left hand side. Ive uploaded a photo and placed it in the header widget but I dont seem to be able to add text to the left of the photo.
Thanks very much
Alan
July 7, 2019 at 2:29 pm #951488LeoStaffCustomer SupportHi there,
Currently this option is used so the default header is hidden:
https://docs.generatepress.com/article/navigation-as-a-header/Do you have a quick example of what you are trying to achieve? It will help me visualize and provide the best suggestion possible.
Let me know π
July 7, 2019 at 2:38 pm #951491AlanHi Leo
Im also new to dropbox. Please let me know if this doesnt work π
https://www.dropbox.com/s/1io0wunz6qc5rkj/Header%20Layout.png?dl=0″>
The image can either go left side or right side
Alan
July 7, 2019 at 3:05 pm #951507LeoStaffCustomer SupportTo achieve that header/navigation layout:
– Uncheck this option:
https://docs.generatepress.com/article/navigation-as-a-header/– Upload a logo here:
https://docs.generatepress.com/article/site-identity-overview/– Add the phone number as the header widget:
https://docs.generatepress.com/article/header-widget/– Set navigation location to below header:
https://docs.generatepress.com/article/navigation-location/Let me know π
July 7, 2019 at 3:40 pm #951523AlanHi Leo
I think that I did that correctly. I still dont know how to put some text below the logo area. Id like to put a h3 heading, maybe about 4 lines of text below the heading and then a button below the text.
Regards
Alan
July 7, 2019 at 3:48 pm #951526LeoStaffCustomer SupportMaybe the header element add-on is what you are looking for?
https://docs.generatepress.com/article/page-hero-examples/
https://docs.generatepress.com/article/how-to-create-a-page-hero/
https://docs.generatepress.com/article/header-element-overview/Let me know π
July 7, 2019 at 5:13 pm #951555AlanHi Leo
I had quite a few issues going on so Ive put temporarily put my old site back up. You can see what Im trying to achieve if you have a look at it now. Is it possible to have the logo, image, greeting text and phone number in these positions?
I think Im going to have to create a subdomain and load a separate copy of wordpress on it so I can build the theme in a more leisurely manner π
Regards
Alan
July 7, 2019 at 5:49 pm #951561LeoStaffCustomer SupportYou can create this section:
https://www.screencast.com/t/okaGfvAfnTDhWith the exact steps I provided here:
https://generatepress.com/forums/topic/header-logo-nav-layout/#post-951507If that doesn’t work, can you link me to the site using GP after all the steps are completed?
Let me know if this is clear π
July 10, 2019 at 2:09 am #953735AlanHi Leo
I got the site up and running today. I’ve got quite a bit of tidying up to do but I still haven’t managed to sort this header out.
Im trying to get the logo up the top left in the top bar. Im also trying to get some greeting text in the area to the left of the van and below where the logo currently is.
I want to put a H3 heading and then have 4 lines of text below the heading, and a button below that text.Ive currently got the van, nav and phone number in the correct positions
I cant seem to do the rest
July 10, 2019 at 2:35 am #953746AlanHi Leo
I think what Im trying to do is get the logo up top left into the top bar and get a new widget to the left of the van.
Regards,
Alan
July 10, 2019 at 7:31 am #953934DavidStaffCustomer SupportHi there,
better method would be to use a Header Element to create the background image with you content and van:
https://docs.generatepress.com/article/header-element-overview/
Then use the header widget for your phone number so its inline with the site logo. Then put the nav below the header.
July 10, 2019 at 6:12 pm #954469AlanHi David
Ok Im lost π
I watched that video and it looks like what Im after but Im not confident.
Basically in my old theme I had a background image that Ive already uploaded. I had two widgets in the header. One for the left side and one for the right side. I put an image in the left side one and some text in the right side one. In this theme I have found a widget and placed an image in it ( but its on the right and Id prefer it on the left) but there doesnt seem to be another widget for the left side.
I think that you are talking about creating one but Im not sure.
This is what I had in the past but maybe you are suggesting something better.
https://www.dropbox.com/s/yyy77jtd8jpqxlx/Header.PNG?dl=0″
Thanks
July 10, 2019 at 6:31 pm #954478LeoStaffCustomer SupportThe header element would be for creating the section highlighted in green:
https://www.screencast.com/t/bTQgYZyhUrHere is a quick step by step guide:
https://docs.generatepress.com/article/how-to-create-a-page-hero/And some examples:
https://docs.generatepress.com/article/page-hero-examples/You will want to create two columns – one for the image and one for the text. This article provides an example of how to create 3 columns:
https://docs.generatepress.com/article/split-header-three-sections/You can basically use the same HTML and CSS to get started.
July 10, 2019 at 7:05 pm #954497AlanOk dont laugh π Would this code be correct?
<div class="header-section"> <div class="header-section-1"> <div class="site-logo"> <a href="URL TO YOUR WEBSITE" title="YOUR SITE NAME" rel="home"> <img class="header-image" src="URL TO LOGO IMAGE" alt="YOUR SITE NAME" title="YOUR SITE NAME"> </a> </div> </div> <div class="header-section-2"> Header right content </div> </div>
and css
.header-section { display: flex; } .header-section > div { width: 50%; } @media (max-width: 768px) { .header-section > div { width: 100%; } }
If I just want to put html in each area do I need to add widgets. Im trying to minimise the number of plugins that I need.
July 10, 2019 at 7:11 pm #954501LeoStaffCustomer SupportThat’s really good π
Small edit in your HTML to make it easier:
<div class="header-section"> <div class="header-section-1"> <img src="https://Car-Image-URL-Here"> </div> <div class="header-section-2"> text section </div> </div>
You can add that directly into the page hero content and just add your desired content:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-1-add-the-contentNo extra plugins needed.
-
AuthorPosts
- You must be logged in to reply to this topic.