Hi all,
I’m just a novice when it comes to CSS and was hoping somebody could help me out. I am using TopBar in Foundation and want to add vertical dividers between the items but after a few hours of trying many different things I just can’t get it.
The page I’m trying to add them on is https://airportguide.com/index2.php
I want to add the dividers between the items in the white TopBar. The black one above it is fine.
This should put you on the right track:
.top-bar-section ul li{
border-right: 1px solid #ccc !important;
}
.top-bar-section ul li:last{
border-right: none !important;
}Maybe I’ve misunderstood, but doesn’t TopBar have a ‘Dividers’ setting in Page Inspector? See attached.
Hi Rob,
That Add Dividers box only seems to work for horizontal dividers in submenus. I was surprised that there wasn’t one for vertical dividers between the main categories.
I just want a pipe placed between menu items like this.
ARRIVALS & DEPARTURES | TERMINAL MAPS | AIRPORT PARKING | SHOPPING | WEATHER | BLOG
Hi Doobox,
That didn’t work. It just places borders around the text.
I just want a pipe placed between menu items like this.
ARRIVALS & DEPARTURES | TERMINAL MAPS | AIRPORT PARKING | SHOPPING | WEATHER | BLOG
Now I did find some code online at https://stackoverflow.com/questions/1936661/vertical-dividers-on-horizontal-ul-menu
which seems perfect for the job. It placed in the pipes BUT it didn’t work correctly with TopBar in that it appeared to TopBar as overflowing the field and ended up wrapping the pipe symbol to a second row. I think this might work if it can be applied to TopBar. I think @joeworkman could just add this option to TopBar and it would save a lot of headaches. I saw somebody else had this same request last year.
It’s in here somewhere… lol I know, because I asked about it a year or so ago.
/* Class dropdown li(list item) add bottom border navigation? */
.dropdown li {
border-bottom: 1px solid #900;
}
/*class dropdown li remove border on last item navigation? */
.dropdown li:last-child {
border-bottom: none;
}
/above 40em screen width remove border on last-child (last list item)/
/not sure what this is doing might be same as above - only media item that is in ems not px this is the same as 640px/
@media screen and (max-width: 40em) {
.top-bar li:last-child {
border-bottom: none;
}
}
/*sets font size for all lister stack items */
.com_stacks4stacks_stacks_lister_stack * {
font-size: 1.2rem!important;
}
/*reduces font size above for small screens /
@media all and (min-width: 640px) {
.com_stacks4stacks_stacks_lister_stack * {
font-size: 1.3rem!important;
}
} / end media */
/for screens less than 968px list ltem that has classes of parent-link hide-for-medium-up change display type to inline-block
not sure here the 968 media query has a 500px media query within this./
@media only screen and (max-width: 1029px) {
li.parent-link.hide-for-medium-up {
display: inline-block !important;
}
/screens less than 840px add bottom border commented out redundant/
.top-bar .top-bar-section li {
border-bottom: 1px solid #900;
}
/screen < 840 class zone - do not display/
ul.zone {
display: none;
}
/*the next two are within the 968 px media /
form label {
color: white;
}
input#mc-embedded-subscribe {
border-radius: 4px;
background-color: #ccc;
color: #000;
}
} / end of 960 media */
input#mc-embedded-subscribe:hover {
background: #fff;
color: #000;
}
/anchors with class top-tel/
a.top-tel {
float: right;
line-height: 80px;
font-family: Open Sans Condensed, sans-serif !important;
font-weight: 700 !important;
font-style: normal !important;
font-size: 16px;
color: rgba(153, 0, 0, 1.00)!important;
}
/anchors with class mob-tel/
a.mob-tel {
margin-right: 65px;
font-size:21px!important;
}
/anchors with class lg-tel/
a.lg-tel {
padding-left: 12px;
font-size:21px!important;
}
/Telephone numbers visibility/
a.mob-tel {
display: inline-block;
}
/screen < 640px/
@media screen and (max-width:420px) {
a.mob-tel {
display: none !important;
}
}
/screen < 1029px/
@media screen and (min-width:1029px) {
a.mob-tel {
display: none !important;
}
}
/* end media */
/*screen > 1020px */
@media screen and (max-width:1029px) {
a.lg-tel {
display: none !important;
}
}
/End - Telephone numbers visibility/
.mag-title-area {
margin-bottom: 0!important;
}
.mg-menu::after {
border-radius: 4px;
}
/screens < 640 px/
@media all and (max-width: 640px) {
.nav-dots .dot-tip {
display: none!important;
}
} /* end media */
/* bullet radius */
.bullet-point {
border-radius: 4px !important;
}
/* lister stack inside block grid */
.com_joeworkman_stacks_foundation_blockgrid_s3_stack .com_stacks4stacks_stacks_lister_stack li {
padding-top:0!important;
padding-botom:0!important;
}
Looks like you don’t go into full menu until 1500+px?
try this:
@media only screen and (max-width: 1502px) {
.menu li {
border-right: 1px solid white;
}
.menu li:last-child{
border-right: none;
}
}TopBar absolutely does support dividers in the horizontal menu simply via the settings just as @robbeattie says - you do not need extra CSS to do this.
Looking at your page it looks like dividers are not being inserted which is most likely because you have a serious syntax error on the page that is preventing javascript from running.
The error is coming from the Google page ads code that you have added. If you remove this error then top bar will work as advertised.
What is more you should. be careful adding CSS to overcome a problem caused by something else - if you remove the error and with any of the above CSS still on the page then you will end up with double dividers and the menu will look a huge mess. TopBar dividers are separate elements and are not merely borders on the list items.
Please reference this page… https://foundationstacks.com/learn/navigation/
Hi Andrew,
I removed all javascript code from my Code section and now have a file with nothing but Foundation stacks in it. I turned on Add Dividers for the white TopBar and you can see that nothing shows up. I have not added anything extra.
In addition to the no vertical dividers problem, I have a Target Stack placing the white text over the image and it’s supposed to be centered. That’s what is selected in the stack but it’s not working. Maybe it’s related and maybe it’s not. I am at a loss because I only have a few stacks in use here and they are all Joe Workman stacks.
Hi Joe,
I watched the video but that didn’t shed any light on why I might be having this problem. If you like I can open a ticket on your site and send you the RW file since it’s so small.
What colour is the Accent Color for the dividers?
Rob
Here is a simple example with two top bars like your page, the first one is totally in default state and shows the dividers, the second one I have centered and turned off the dividers in case that was the cause of the issue. It works fine.
https://bwd.d.pr/KyBbER
You page has no divider divs in the menu still which is really odd if the checkbox is checked (and I’m sure it is). Check my file works OK for you and if so try replacing your TopBar with a fresh stack (you can do this on a duplicate page just to check). I suspect that this will get everything working.
It works now! Thanks everybody for your help!!!
It turns out that all of my settings were correct in TopBar. After looking at @tav 's example, I saw that mine should work but didn’t. I proceeded to uncheck and recheck the Add Dividers box. That fixed it. There was some little bug in RW, I guess, where it wasn’t taking the set checkbox. Once I did that, it all worked. That was four days of banging my head against a wall for nothing.
Mike
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.