7.1 header - center logo + split navigation

https://stackoverflow.com/questions/3121876/css-style-divide-nav-into-left-and-right

You need CSS + JavaScript to achieve this. This requires Business Plan.

Complicated.

@tuanphan could you help me with it?

On 9/4/2020 at 6:29 PM, Kwamzilla said:

@tuanphan could you help me with it?

Can you share site url? We can check easier.

@tuanphan I also am trying to achieve this for a client. Very little CSS and Java experience but comfortable copy and pasting a code. 

Website is www.bellainspired.co and password is bella 

Did anyone have any luck with this?

2 minutes ago, Kwamzilla said:

Did anyone have any luck with this?

I answered Juicebox in his post.

Anybody find an answer for this? 🙂 

I'm trying to solve the issue by playing with the margins/padding of the navigation links - my client isn't willing to pay for a business plan so I'm relying solely on CSS.

I need to test it more thoroughly, but so far it seems to be doing the trick.

I used the following code:

// Navigation Links Spacing //
.header-nav-item:nth-child(3) a {
padding-left: 100px!important;}
.header-nav-item:nth-child(2) a {
margin-left: 0px!important;
margin-right: 450px!important;}

On 10/17/2020 at 7:48 AM, Webswool said:

I'm trying to solve the issue by playing with the margins/padding of the navigation links - my client isn't willing to pay for a business plan so I'm relying solely on CSS.

I need to test it more thoroughly, but so far it seems to be doing the trick.

I used the following code:

// Navigation Links Spacing //
.header-nav-item:nth-child(3) a {
padding-left: 100px!important;}
.header-nav-item:nth-child(2) a {
margin-left: 0px!important;
margin-right: 450px!important;}

You can try using position relative with negative value for left for nth-child(3), recently I solved for a member using this approach

Thanks @tuanphan - in the end I ended up cheating as the code I used above became tricky on pages where the logo wasn't hidden.

Instead I've ended up utilising the email and social media elements and using the header button for the contact phone number. Have attached photo. It's a simple fix but it's done the job for this particular project!