Trying to center logo and split links in 7.1

Site URL: http://www.bellasinpired.co

I am working with a client who has it in their heads that they want their logo centered and the links in the header to be on opposite sides of the banner. I built this site in 7.1 and obviously do not have the option now to convert to a template that can achieve this. I'm not sure what to do? I've seen in the forums that you can insert code to do it but sadly am not sure where to start.

Any ideas of what I can do? See below for Bella's (my client) header vs the header she wants.

Feel free to look at the site as well http://www.bellainspired.co password is bella

You need both CSS + JavaScript to do this (Need a Business Plan or higher).

The idea here is to add a Navigation to the right of the logo, then hide some items in both menus. Hope this help.
I coded this for a few clients recently.

On 9/21/2020 at 3:11 AM, tuanphan said:

You need both CSS + JavaScript to do this (Need a Business Plan or higher).

The idea here is to add a Navigation to the right of the logo, then hide some items in both menus. Hope this help.
I coded this for a few clients recently.

Thank you for the help! I am communicating with the client now about this change. Disappointed I can't just swap out templates like in 7.0

How can I utilize your skills to help with my client if they want to pursue this change?

On 9/23/2020 at 2:08 AM, Juicebox said:

Thank you for the help! I am communicating with the client now about this change. Disappointed I can't just swap out templates like in 7.0

How can I utilize your skills to help with my client if they want to pursue this change?

There are 2 solutions to do this.

Free option. When you need it, just share the url, we will take a look

Paid option. You can contact me via link in the signature.

Both of them help you achieve the above layout. 

22 hours ago, tuanphan said:

There are 2 solutions to do this.

Free option. When you need it, just share the url, we will take a look

Paid option. You can contact me via link in the signature.

Both of them help you achieve the above layout. 

That would be fantastic! The URL is http://www.bellainspired.co password is bella Thank you so much! She will be thrilled!

11 minutes ago, Juicebox said:

That would be fantastic! The URL is http://www.bellainspired.co password is bella Thank you so much! She will be thrilled!

Adjust your header layout to Left Menu - Logo.

Next, insert a Text Block in Footer > Enter text links (we will use text links as Navigation items)

Then I will use jQuery to move it to right of Logo

Final, I will use CSS to hide some items in the left menu.

16 hours ago, tuanphan said:

Adjust your header layout to Left Menu - Logo.

Next, insert a Text Block in Footer > Enter text links (we will use text links as Navigation items)

Then I will use jQuery to move it to right of Logo

Final, I will use CSS to hide some items in the left menu.

Done! Let me know if I set it up correctly for you!

I see nav under logo here? https://www.bellainspired.co/

Adjust your header layout to Left Menu - Logo

22 hours ago, tuanphan said:

I see nav under logo here? https://www.bellainspired.co/

Adjust your header layout to Left Menu - Logo

Strange! I had changed it and guess it didn't save. Header is set up Left Menu - Logo

14 hours ago, Juicebox said:

Strange! I had changed it and guess it didn't save. Header is set up Left Menu - Logo

Hi,

You want: 

• Left Menu - Logo - Right Menu?
• OR Left Menu - Logo - Right Menu/Instagram/Button?

10 hours ago, tuanphan said:

Hi,

You want: 

• Left Menu - Logo - Right Menu?
• OR Left Menu - Logo - Right Menu/Instagram/Button?

The client is looking for a minimal look (I know right) so left menu - logo - right menu would be great. I can just drop the social in the footer or on the home page.

On 9/27/2020 at 8:15 AM, Juicebox said:

The client is looking for a minimal look (I know right) so left menu - logo - right menu would be great. I can just drop the social in the footer or on the home page.

Hey @tuanphan Did I get the page set up the way you need it?

Which text link on footer?

Quote

Next, insert a Text Block in Footer > Enter text links (we will use text links as Navigation items)

20 hours ago, tuanphan said:

Which text link on footer?

 

Does this work? Or do I need to remove all text without a hyperlink or lay it out a certain way?

On 9/30/2020 at 1:43 PM, Juicebox said:

Does this work? Or do I need to remove all text without a hyperlink or lay it out a certain way?

@tuanphan Let me know if I laid this out correctly! Or if I whiffed on it

Add to Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('div#block-da11d007411e207dc85d p:nth-child(2)').insertBefore('.header-actions.header-actions--right .header-actions-action:first-child');
});
</script>