Split Nav - left - center - right + Vertical Nav

Site URL: https://www.transmissionsoflight.net/

I'm not sure if this is possible, but now that my navigation bar is quite content heavy I would like to split it so that some of the nav  menus are aligned to left, some to center, some to right.

I would like to have the Welcome + About pages on the left.
The Channeled Messages, Energy Reports, Sacred Poetry, Blog in center under the Site Title.
And Services. Circles, Testimonials, Connect on the right.

Ideally I would also prefer them to display vertically.

None of the custom codes I've found and experimented with have worked - grateful for any support.

Sincerely

Julia

On 6/30/2021 at 9:03 PM, Dragonfly9 said:

Site URL: https://www.transmissionsoflight.net/

I'm not sure if this is possible, but now that my navigation bar is quite content heavy I would like to split it so that some of the nav  menus are aligned to left, some to center, some to right.

I would like to have the Welcome + About pages on the left.
The Channeled Messages, Energy Reports, Sacred Poetry, Blog in center under the Site Title.
And Services. Circles, Testimonials, Connect on the right.

Ideally I would also prefer them to display vertically.

None of the custom codes I've found and experimented with have worked - grateful for any support.

Sincerely

Julia

Add to Design > Custom CSS

/* nav */
.horizontal-navigation-bar {
    max-width: 100% !important;
}
.horizontal-navigation-bar nav {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

Thank you @tuanphan - that was an easy fix. I am most grateful 🙏

I am wondering is it also possible for them to be vertically stacked? -

So on the left side I have

Welcome + About  -> but vertically stacked:
Welcome
About

In the center I have Channeled Messages, Energy Reports, Sacred Poetry, Blog - under the title.
(These can be vertically stacked too if that makes it easier / possible).

And on the right - Services. Circles, Testimonials, Connect -> vertically stacked:

Services
Circles
Testimonials
Connect

Thank you for your extra time and trouble in considering this.

Julia

Don't remove above code.

Add this code

/* nav vertical */
.horizontal-navigation-bar nav {
    width: 100%;
}
.horizontal-navigation-bar nav ul {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

Looks complex. Still checking...

Thank you so much!

This looks great as a layout.

The problem I'm having as you can see in the screenshot is that I can't put the pages in the order I want. (I tried dragging them into various positions, but that didn't work).

Is there possibly a fix for that?

Thank you for your generosity in sharing so much of your time and expertise 🙏

Edit - I've added an extra 'upcoming event' to the nav since my initial question.

If possible I'd like that to show bottom center - so the order being like this ->

Left -
Welcome
About

Center -
Channeled Messages
Energy Reports
Sacred Poetry
Blog
Upcoming 6-Month Chakra Activation

Right -

Services
Circles
Testimonials
Connect

(If it turns out not to be possible, no worries!).

Thank you again.

On 7/2/2021 at 11:25 PM, Dragonfly9 said:

Thank you @tuanphan - that was an easy fix. I am most grateful 🙏

I am wondering is it also possible for them to be vertically stacked? -

 

So on the left side I have

Welcome + About  -> but vertically stacked:
Welcome
About

 

In the center I have Channeled Messages, Energy Reports, Sacred Poetry, Blog - under the title.
(These can be vertically stacked too if that makes it easier / possible).

 

And on the right - Services. Circles, Testimonials, Connect -> vertically stacked:

Services
Circles
Testimonials
Connect

 

Thank you for your extra time and trouble in considering this.

 

Julia

 

Can you duplicate the site & add me as an admin there? I will try testing some CSS Flex code.

Hi @tuanphan 🙂 I am wondering how you may have ended up with this request? I too am hoping for a left and right aligned vertical menu, see attached screenshot - Id love to know how I could achieve this look, thank you!  🙂

On 1/14/2023 at 7:42 AM, AprilHardy87 said:

Hi @tuanphan 🙂 I am wondering how you may have ended up with this request? I too am hoping for a left and right aligned vertical menu, see attached screenshot - Id love to know how I could achieve this look, thank you!  🙂

This will require JavaScript code + CSS Flex code

If you share link to your site, we can test & give the code