- This topic has 18 replies, 2 voices, and was last updated 1 year, 7 months ago by
.
-
Posts
-
I am trying to get my header to look exactly like the screenshot with the menu on the very right, then the search to the left of that.
Site logo in tbe middle and just a few social icons on tbe left.
I’m totally lost.
Customer Support
Hi Heath,
From my end, this is what I see on mobile: https://share.getcloudapp.com/nOubD9ly
May we know what exact details need to be changed? Or are you seeing something different?
Let us know.
I think I hadn’t cleared my cache. That was from a separate theme and I’m wanting to do the same thing with generatepress
Can you share the link to where you want to implement this?
It’s in the private area
I see. Let’s add the Social Icons first.
Can you create a Block Element – Hook, hooked to
after_primary_menu, and then add the Social Icons through GenerateBlocks Buttons? Place the GB Buttons inside a Container Block as well so you can set the container to hide on desktop and tablet if you prefer.Let us know once you’ve done so.
I must be missing something. I’ve created a Block Element but it is not showing after_primary_menu in the location display rules.
It’s not in the Display rules.
after_primary_menucan be found in the Element Setting. See: https://share.getcloudapp.com/NQujKNloThanks. I feel silly for missing that. Getting this set up now. Is there a tiktok icon?
There isn’t by default. Perhaps you can try this?: https://fontawesome.com/icons/tiktok?s=solid&f=brands
This step has been completed
I qddes the social icons. Are y’all able to assist with the next steps?
Great! Now, try adding
social-iconsto the class list of the Container Block holding the Icons.Then, add this CSS:
nav#mobile-header .gb-container.social-icons { order: -1; margin-right: auto; } nav#mobile-header .site-logo.mobile-header-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } nav#mobile-header .site-logo.mobile-header-logo img { width: 100px; height: auto !important; } nav#mobile-header > .inside-navigation { position: relative; padding-top: 30px; padding-bottom: 30px; } nav#mobile-header span.menu-bar-item.search-item a { padding: 0; }It seems that css didn’t quite work out. It did something funky.
I checked your site, and it seems social-icons hasn’t been added to the class list of the Container Block yet in your Element. Can you add that first?
- You must be logged in to reply to this topic.