- This topic has 14 replies, 3 voices, and was last updated 5 years, 10 months ago by David.
-
AuthorPosts
-
June 21, 2018 at 4:00 am #605054Agustin
Hi Guys, how can I achive this look in header? I have made it with elementor but the results in mobile are ugly, can I do this with GP only?
June 21, 2018 at 5:51 am #605137DavidStaffCustomer SupportHi there,
you can use a GP Page Header and set it to merged with Site Header. These articles provide some info:
https://docs.generatepress.com/article/page-header-overview/
Note: once the Page Header and Site Header are merged you can either make the Navigation colors transparent in the customiser, or you can set them in the Page Header (advanced tab). The latter means you can keep solid colors for sticky and transparent colors for merged header.
June 21, 2018 at 7:28 am #605218AgustinThanks David
With you help , I almost achieved the results I needed only one problem
As you see in my example the header have a transparent background kind of a light gray.
1. I have defined this light gray with Customize in site header and works there,
2. But when I merge the site header and the page header I this color is lost , its like the background image is on top of the background color of the header
3. I have used the Advanced Options to define this transparent colors as background but then the whole image is covered in the transparent colorI am missing something right?
Regards
June 21, 2018 at 7:38 am #605224DavidStaffCustomer SupportHi,
ok for your current set-up it would be easier to hit the header with some CSS (adjust accordingly):
.generate-merged-header .site-header { background-color: rgba(35,117,224,0.5); }
June 21, 2018 at 8:11 am #605328AgustinThanks Dave worked super!!!
One last issue , I have added a logo for the mobile view to be shown instead the picture.
Since the header image is 2000 x 1000 is there a css code to resize the image for mobile view?
Regards
AgustinJune 21, 2018 at 8:30 am #605357DavidStaffCustomer SupportI would suggest the following changes, remove the text from the background image and instead add this as content to the Page Header, currently the text in the image is being cut off when the browser is rescaled. It also makes the text indexable.
If you then still need to adjust the image or simply remove it we can apply some CSS to do so. Let me know
June 21, 2018 at 9:04 am #605389AgustinOK I will do that and come back to you then
Regards
June 21, 2018 at 10:57 am #605503AgustinDone David , I will use an slider instead, fixed the scaling , but in mobile the menu is Kind of Lost in the image and a big gray are now apears besides the slider, can this be fixed?
Maybe view the Menu Above the Slider , in black instead of white, any other solution you suggest wiil be great, only need to fix the mobile view , Menu and Slider.
Regards
June 21, 2018 at 11:09 am #605512DavidStaffCustomer SupportWith MetaSlider under the Advanced Options their is the option to stretch 100% – currently it is limited to 2000px wide. You will need to remove the full height option in the header as well or you will have a lot of empty space below it on smaller screens.
June 21, 2018 at 12:09 pm #605538AgustinHi Dave, fxed then. only one issue remains
the mobile menu is lost in the picture now, can be put above or below the slider, outside of the picture?
I attach a pic
June 21, 2018 at 12:12 pm #605540DavidStaffCustomer SupportYou can assign a Mobile Header in the Customiser > Layout > Header this should resolve the problem
June 21, 2018 at 12:40 pm #605559AgustinHi Dave, I only managed to center the mobile menu, but not put it outside the header.
I am missing some setting ?
I hve used the option mobile menu on and off and the problem still exists.
Regards
June 21, 2018 at 9:41 pm #605746TomLead DeveloperLead DeveloperYou can un-merge the navigation on mobile like this:
@media (max-width: 768px) { .generate-combined-header { position: relative; } }
Does that get you closer?
Let me know 🙂
June 22, 2018 at 6:59 am #606020AgustinHi Tom!
I added some margin and worked great!!!!Regards and thanks to both of you
AgustinJune 22, 2018 at 7:15 am #606028DavidStaffCustomer SupportYou’re welcome. Glad we could help
-
AuthorPosts
- You must be logged in to reply to this topic.