# Divider in middle of nav bar?

**URL:** <https://forums.realmacsoftware.com/t/divider-in-middle-of-nav-bar/26015>\
**Category:** RapidWeaver Classic\
**Created:** [March 28, 2019, 10:15am UTC](https://forums.realmacsoftware.com/t/divider-in-middle-of-nav-bar/26015 "2019-03-28T10:15:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sykomac](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sykomac/32/11664_2.png) [@sykomac](https://forums.realmacsoftware.com/u/sykomac)\
**Post date:** [March 28, 2019, 10:15am UTC](https://forums.realmacsoftware.com/t/divider-in-middle-of-nav-bar/26015/1 "2019-03-28T10:15:26Z")

</div>

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

If you look at this website – inviting [company.com](http://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

---

<div class="post-metadata">

**Author:** ![robbeattie](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/robbeattie/32/78_2.png) [@robbeattie](https://forums.realmacsoftware.com/u/robbeattie)\
**Post date:** [March 28, 2019, 11:02am UTC](https://forums.realmacsoftware.com/t/divider-in-middle-of-nav-bar/26015/2 "2019-03-28T11:02:10Z")

</div>

Sadly can’t view site from the UK.

---

<div class="post-metadata">

**Author:** ![jabostick](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jabostick/32/1760_2.png) [@jabostick](https://forums.realmacsoftware.com/u/jabostick)\
**Post date:** [March 28, 2019, 2:29pm UTC](https://forums.realmacsoftware.com/t/divider-in-middle-of-nav-bar/26015/3 "2019-03-28T14:29:03Z")

</div>

His link should be [https://www.invitingcompany.com/](https://www.invitingcompany.com/)

---

<div class="post-metadata">

**Author:** ![jabostick](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jabostick/32/1760_2.png) [@jabostick](https://forums.realmacsoftware.com/u/jabostick)\
**Post date:** [March 28, 2019, 2:30pm UTC](https://forums.realmacsoftware.com/t/divider-in-middle-of-nav-bar/26015/4 "2019-03-28T14:30:58Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![ricinport](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ricinport/32/9349_2.png) [@ricinport](https://forums.realmacsoftware.com/u/ricinport)\
**Post date:** [March 28, 2019, 3:30pm UTC](https://forums.realmacsoftware.com/t/divider-in-middle-of-nav-bar/26015/5 "2019-03-28T15:30:53Z")

</div>

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](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);  
}

---

<div class="post-metadata">

**Author:** ![sykomac](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sykomac/32/11664_2.png) [@sykomac](https://forums.realmacsoftware.com/u/sykomac)\
**Post date:** [March 28, 2019, 3:31pm UTC](https://forums.realmacsoftware.com/t/divider-in-middle-of-nav-bar/26015/6 "2019-03-28T15:31:39Z")

</div>

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

Thanks

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/system/32/25301_2.png) [@system](https://forums.realmacsoftware.com/u/system)\
**Post date:** [April 28, 2019, 1:31am UTC](https://forums.realmacsoftware.com/t/divider-in-middle-of-nav-bar/26015/7 "2019-04-28T01:31:41Z")

</div>

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