Archived topic
Custom Header
9 replies · Started by Moretasks on March 22, 2022
Hello,
How can create our website header like https://www.goodrxmedicine.com/?
If yes, then could you please send any documentation or Ref video?
Regards
Hi there,
that's not easy - does the Cart Menu have to be in that position ?
Hello,
NO, we don't need a cart button over there
Regards
Hi there,
To make things much easier, one approach is to start with a similar template which may imported from the site library.
For reference: https://docs.generatepress.com/article/using-the-site-library/
Specifically, one similar site which may be imported from Appearance > GeneratePress > Site Library is Prime.
See this to know how it would look like: https://gpsites.co/prime/
After this, you may edit the logo, colors and other stuff through the customizer.
Here is the link to our documents for reference: https://docs.generatepress.com/
Other modifications can also be done, but it would be best to do it one by one and preferably new topics for each issue/inquiry to avoid confusions.
Kindly let us know. Hope this clarifies. :)
Thanks for the help,
Can we import only header because we don't need products and all?
Regards
Hi there,
unfortunately not - its ALL or nothing.
You can of course import it 100% and just delete what you do not need.
If not you can follow these steps:
1. Customizer > Site Identity and set it to display your site title or logo.
2. Customizer > Layout > Primary Navigation --> Location: After Header
3. You will need this plugin for the search:
https://wordpress.org/plugins/ajax-search-for-woocommerce/
4. Now you need to create 2 x Hook Elements in Appearance > Elements ( make sure Elements is enabled in Appearance > GeneratePress ):
https://docs.generatepress.com/article/hooks-element-overview/
4.1 The first hook is for the Search in header.
Add the Search Plugins Shortcode.
Set the Hook to generate_after_header_content
Check execute Shortcodes
Set Display Rules to Entire Site
4.2 The second hook is for the login
Add this as the Hooks content:
<span class="menu-bar-item">
<a href="https://gpsites.co/prime/account/">Login | Register</a>
</span>
Change the URL to your site
Set the Hook to generate_menu_bar_items
Set Display Rules to Entire Site
5. Now its just a case of hitting the cutomizer typography and color styles for your needs.
THANKS, DAVID
Could you please tell me how can I edit the header menu for mobile devices?
blog.goodrxmedicine.com
Regards
What layout do you require on Mobile ? As you have a larger logo then prime and you have 3 buttons in a header widget. So replicating the Prime site probably won't work. Let me know.
Hello,
We just created a simple menu & it shows blank on mobile devices.
Regards
In Appearance > Menus ( or Customizer > Menus ) edit the menu you want and make to check the Off Canvas Panel in the list of Locations.