Logo Between the Header Menu & Custom Top Bar

Support
#1

Hi

I need help with the following. I have tried using custom CSS and HTML without any luck.

  1. How can I put the logo between the menu?
  2. The Top Bar BG Color needs to overflow and using custom HTML and CSS needs to have the Social Icons and a Language Drop-down. Please see example below:
  3. Social media icons need to include YELP.

This is what I’m currently getting:

Summary

https://magicpalace.wpengine.com/

Please let me know if is clear or you have any questions.

Thanks for your help! :smile:

#2

Hey Luis,

What you need would require a lot of custom coding/development with X. The good news is you can upgrade to Pro which includes a Header and Footer builder and you can easily build your header design. Here’s how to upgrade: https://theme.co/apex/forum/t/x-to-pro-conversion/104

After you upgrade, go to Pro > Templates and import the Starter Pack.

That will import the Starter: Logo Middle Header Template. You can use that template when creating headers.

Here’s the look of the template. Change the parts to make it your own. You need to set up 2 menus in Appearance > Menus by the way.

You can learn more about Pro in our Knowledge Base and Youtube channel.

Please note that we do not offer custom development as part of our theme support. If you wish to proceed with your header design with X, you’d regretfully need to hire a web developer.

Hope that helps and thank you for understanding.

#3

Thanks for the reply! :smile:

Ho much will Upgrading affect what I have done already? I’ve only made some simple CSS changes on the global CSS page and some in line CSS Style changes. Will I loose these?

Summary

Also, is there a way to get the 50% coupon you had available for Black Friday?

Thanks in advance for your help!

#4

Hi Luis,

No, those custom CSS should not be affected by conversion from X to PRO and all your pages created should remain intact.

Sorry but Black Friday is over and I think you’re referring to a ThemeForest promo (not ours) :smile:

Cheers!

#5

Thanks @friech

I’ll just modify the design so I can do it in the regular version. The only question I have now is how can I target the CSS of the top part so I can change the BG to #67156e

Thanks again! :smile:

#6

Hey Luis,

Before answering, did you see in your Apex Licenses Page that you can upgrade to Pro for $15?

Anyways, the area you’re referring to is the Topbar and it has a class of x-topbar. It’s not feasible to list all the theme classes though so I’d strongly recommend that you learn how to use the browser’s element inspector to see the classes. Here’s a guide: https://zapier.com/blog/inspect-element-tutorial/

Hope that helps.

#7

Thanks @christian_y

That helped a lot. I was able to find the right class and make more modifications. The only one I wasn’t able to fix was this one. On the Mobile version there is a white box inside x-topbar-inner it should be the same color as the BG #67156e.

Please see below:

Thanks in advance!

#8

Hi Luis,

Did you figure out that one too? I cant see that issue on my end, please clarify.

Have a nice day,
Cheers!

#9

Hi @friech!

Yes, I was able to figure it out, for some reason it was part of the p style.

Thanks a million for your help! :smile:

#10

You are most welcome.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.