- This topic has 11 replies, 3 voices, and was last updated 2 years, 10 months ago by Ying.
-
AuthorPosts
-
June 12, 2021 at 6:24 pm #1820141casey
First of all, thanks for the amazing support. You guys are amazing.
Now here’s what I’m trying to figure out how to do… I’d like to recreate this header (https://imgur.com/a/J84iIj0) with the logo in the middle, search bar to the right, hamburger menu and text to the left (I’ll have Donate instead of Subscribe).
Then once it hits 767px, I’d like the search bar to only be the the search icon and swap spots with the “Donate” text (https://imgur.com/a/TUz1Qqb).
I hope this is not too much to ask for, thanks for the help.
June 13, 2021 at 9:44 am #1820704YingStaffCustomer SupportHi Casey,
Glad that you are happy with our support!
So in order to make the menu toggle to show on desktop, you’ll set a high value for mobile break point, for eg.
5000px
.
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-widthFor the Donate button, you can use a
block element - hook
, hook name would begenerate_menu_bar_items
.
https://docs.generatepress.com/article/block-element-overview/Enable the search for primary navigation at Appearance > Customize > Layout > Primary Navigation.
Once these are done, there will be some CSS and PHP filter required. We can have a look and point you in the right direction then 🙂
June 18, 2021 at 5:38 pm #1827101caseyHey, just wanted to do a few other things before doing the header.
But I’ve done the first step, I set it to 5000px. However, now I’m a little confused. For the donate button, once I click on “Add New Element”… do I chose hook or block? The only way I see the “generate_menu_bar_items” is when I choose hook but the thing is I have no clue what to put in that top section (I guess that’s where you type some code).
June 19, 2021 at 4:22 am #1827423caseyI’ve done all the steps, what’s the CSS and PHP filter I need to use? Thanks.
June 19, 2021 at 4:26 am #1827426caseyI’ve made it only show on one page (URL attached below) until everything is done.
June 19, 2021 at 4:44 am #1827443DavidStaffCustomer SupportHi there,
try adding this CSS to create the 767px arrangement:
@media(max-width: 767px) { .menu-bar-items { flex: 1; justify-content: space-between; } }
June 19, 2021 at 5:02 am #1827455caseyHey David,
I’ve put that in, but it’s moving the “Donate” button to the left and not the search icon.
June 19, 2021 at 6:02 am #1827481caseyBut on my other pages the search bar is right beside the hamburger icon (as it should be). It’s just when the Donate Button is added like on the URL I mentioned.
June 19, 2021 at 6:37 am #1827500DavidStaffCustomer SupportI can correct the CSS above to switch the order – but i need to know where the Donate button is being displayed – what are the Display Rules you’re using ?
June 19, 2021 at 7:52 am #1827696caseyNo problem, it’s the same URL I attached in the private information part. I’ve included it again (I’ll keep it on this URL until we figure everything out). Btw, thanks for your patience.
June 19, 2021 at 7:53 am #1827697caseyThe display rule is Post and then I chose the URL I attached.
June 19, 2021 at 10:48 am #1827796YingStaffCustomer SupportHi Casey,
Try this CSS:
#mobile-header .menu-toggle { margin-right: 0; } .menu-bar-items { flex: 1; } .main-navigation .menu-bar-items a.custom-button { margin-right: auto; }
-
AuthorPosts
- You must be logged in to reply to this topic.