- This topic has 15 replies, 3 voices, and was last updated 3 years, 2 months ago by David.
-
AuthorPosts
-
January 20, 2021 at 12:38 am #1625924Andrew
Hi, I am trying to rebuild my site after my developer, who was working with Divi, ran away. I am moving back to Generate Press and have installed GP Premium and Blocks to latest version.
With all the options, and the ones I would like that aren’t there, could you assist by advising how to recreate this header/nav section?
1. I have no idea how to get the top blue section in the and above the nav. It consists of a button to the left, a ticker centered, support is manually coded, and account is the woo-account end point. The icons shown come with Divi and I see that fontawesome has been removed from the GP theme. I don’t want remote fonts so I am intending to use the old elegant fonts pack (please advise if this is ok to do).
2. I have created the basic nav part (white section) but unsure how to align it is shown in the first image. The search is advanced woo search which I can add with shortcode. Just unsure where and how . I am also struggling to have it align like this.
I know I’m probably asking way too much of you but anything you could do to assist would be tremendously appeciated.
Thanks and regards
AndrewJanuary 20, 2021 at 1:11 am #1625950DomSee if any of this helps: https://generatepress.com/forums/topic/display-navigation-under-header/
January 20, 2021 at 2:06 am #1625988AndrewThanks I’ll give that a look. For the header would you suggest using an element or a block?
January 20, 2021 at 4:28 am #1626109DavidStaffCustomer SupportHi there,
theres a few methods of approaching this, if your confident with the Block Editor then i would recommend:
1. Install the GenerateBlocks plugin
2. Create a new Block Element.
2.1 Build your layout with the GB Blocks.
2.2 Set the Block Type to Hook >before_header
2.3 Set the Display Rules to Entire Site.Somethings to note:
1. Make sure there are no empty Text blocks below your new top bar. Gutenberg likes adding them by default – delete them.
2. The Headline Block supports Shortcodes – not sure how that Ticker is output but it may work within one, if not it will be a Shortcode block.
3. GB Docs for reference:
https://docs.generateblocks.comJanuary 20, 2021 at 4:37 am #1626126AndrewAs always, David, you’re help is invaluable. Let me see how I go and I’ll report back to you.
Thanks
January 20, 2021 at 5:09 am #1626159DavidStaffCustomer SupportYou’re welcome π
January 20, 2021 at 6:47 am #1626264AndrewI’m so darn close here David. I can’t work out where this <p> is coming from. It adds 1.5em top and bottom padding.
https://pasteboard.co/JKwFl4M.jpgI know you’ll find it π
If you want to see all the code it’s on the url to the staging site I added.
January 20, 2021 at 8:08 am #1626577DavidStaffCustomer SupportIf you select the Headline block and go to Settings > Spacing you can change the Bottom Margin value to
0
– otherwise it will inherit the Themes Typography Bottom margin ( you should see a greyed out placeholder – which is an estimate of the themes settings ).January 20, 2021 at 6:36 pm #1627103AndrewDavid you’ve been an amazing help and I’ve almost got it as good as it can be.
But…
I need to keep the logo image on the left but also move the menu over to the left the same as it is on the original site. I figure it’s something to do with flexbox css but I can work it out. At the same time I need to keep the search and and cart logo on the right side, but have them swap places.Is this doable?
January 21, 2021 at 1:21 am #1627325DavidStaffCustomer SupportRequire a few steps.
1. I would suggest enabling the Navigation as Header in Customizer > Layout > Header.
NB. The logo size will be defined by the Menu Item Height.2. Customizer > Layout > Primary Navigation, set the alignment to Left.
3. Now to get the Search before the Cart, means removing the header widget and using a Hook Element to insert the search field/
https://docs.generatepress.com/article/hooks-element-overview/
3.1 I would recommend using one of the Woo Search plugins like:
https://wordpress.org/plugins/advanced-woo-search/
https://wordpress.org/plugins/ajax-search-for-woocommerce/The default WP search is terrible for Woo, and these provide the ajax search your current site has.
3.2 To position the search inside where the Cart is output you can add the plugin shortcode to this hook:
generate_menu_bar_items
Once thats done let me know and ill take a look at the necessary CSS
January 21, 2021 at 4:09 am #1627528AndrewBrilliant. It’s easy when you know the correct combination of settings. π I’ll get on it right away.
January 21, 2021 at 4:49 am #1627569DavidStaffCustomer SupportYou’re welcome
January 21, 2021 at 7:45 am #1627977AndrewI tried the css myself but all I managed to do was waste a lot of time. π
Over to you Dave.
January 21, 2021 at 7:59 am #1627991DavidStaffCustomer SupportLooking good π
To move the Search before the Cart icon try this CSS:.main-navigation .menu-bar-items { flex-direction: row-reverse; }
January 21, 2021 at 1:38 pm #1628466AndrewAll done. Thank you Dave.
-
AuthorPosts
- You must be logged in to reply to this topic.