Divider in middle of nav bar?

Classic
1

Well, not sure if the subject really describes what I am trying to accomplish.

If you look at this website – inviting company.com

There is a horizontal line that runs through the nav bar but is not displayed behind it.

Trying to recreate that effect but not sure how.

Most likely will be using Foundry on the site that I am try to do this. But am open to other suggestions.

Figured its probably something I can do with BWD stacks?

Thank you,
Paul

2

Sadly can’t view site from the UK.

3

His link should be https://www.invitingcompany.com/

4

I don’t know how effectively this would work (and especially when you switch to the mobile menu - it may require two menu versions) but my first thought was to put in a 3-column stack, in the middle have your nav bar, and the left and right have a divider line (either the Foundry built in one or RuleStack from stacks4stacks).

5

Try putting your parent/nav stack into a CSS Box stack (free from JW)
Use the Class wrapit in the CSS Box stack settings.
Add the below css to the CSS tab of HTML Code

Example at https://casaejardim.pt - scroll down to where it says ‘Trending at C&J’.
This is a header in said CSS Box.
The effect has quite a nice fade out to the edges of the page.

.wrapit h4 {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-gap: 20px;
align-items: center;
}

.wrapit h4::before {
display: block;
content: ‘’;
height: 1px;
background: linear-gradient(to left, teal, transparent);
}

.wrapit h4::after {
display: block;
content: ‘’;
height: 1px;
background: linear-gradient(to right, teal, transparent);
}

.wrapit2 h4::after {
display: block;
content: ‘’;
height: 1px;
background: linear-gradient(to right, snow, transparent);
}

6

Cool. I’ll give that a try and see what I get.

Thanks

7

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