CODEWITHSUNDEEP
csssasszurb-foundation
user3849925
user3849925

Reputation: 31

I need shorter dividers in my topbar (using foundation)

I'm using Foundation and my topbar looks the way I want it to except for one thing, I want the dividers to be shorter, and I can't get them to be any other way. Right now they are full length.

Example of my code:

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
    </li>
                <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
 <section class="top-bar-section">
    <ul class="centered"> 
        <li> <a href="http://localhost:8888/wordpress/">one</a> </li>
            <li class="divider"></li>
        <li> <a href="http://localhost:8888/wordpress/?page_id=22">two</a> </li>
            <li class="divider"></li>
        <li> <a href="#">three</a> </li> 
            <li class="divider"></li>
        <li> <a href="#">four</a> </li> 
             <li class="divider"></li>
        <li> <a href="#">five</a> </li> 
    </ul>
 </section>
</nav>

The CSS from foundation looks like this:

$topbar-divider-border-bottom: solid 1.8px #c6b456;
$topbar-divider-border-top: solid 1.8px #c6b456;

Upvotes: 1

Views: 997

Answers (2)

Sudheer
Sudheer

Reputation: 2985

the top-bar divider border-right property is taken from

line-609 of _topbar.scss

& > ul > .divider,
        & > ul > [role="separator"] {
          border-bottom: none;
          border-top: none;
          border-#{$opposite-direction}: $topbar-divider-border-bottom;
          clear: none;
          height: $topbar-height;
          width: 0;
        }

that is set from the variable $topbar-divider-border-bottom

If you just want to change the border-right with out effecting the rest of the properties you have to set it manually in the above sass.

or override using the custom css

.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
 border-right: solid 1px #4e4e4e;
}

or ovveride using sass

Upvotes: 1

Favitalegur
Favitalegur

Reputation: 36

Here's the actual foundation generated css 

@media only screen and (min-width: 40.063em) {
    .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
          border-bottom: none;
          border-top: none;
          border-right: solid 1px #4e4e4e;
          clear: none;
          height: 45px;
          width: 0; }
}

I guess you can override the height to make it shorter and add margin-top to make it vertically centered.

Upvotes: 1

Related Questions