Menu icon Foundation
Customize Top Bar with CSS

Hi,

I've browsed the forum without success. I am trying to understand what are the items in the css file that correspond to the links in the top bar (not the top bar itself), in order to modify :
1. The vertical alignement or possibly the padding of the text in each tab
2. The style of the separators between each tab in the bar ( I am not sure I understand what the divider class is)
3. The color of each tab
4. Their vertical alignment in the top bar

I've been able to modify the top bar already. I'm just confused about the terminology in the css.

Thank you!

    											   <section class="top-bar-section">
       
      <ul class="left">
        <li class="divider"></li>
        <li class="has-dropdown">

        <li><a class="active"  href="/Users/coraliediatkine/Desktop/foundation-5/Biography.html" class="menubar">Text1</a></li>

        <li class="divider"></li>
                <li class="has-dropdown">
        <li><a class="active"  href="/Users/coraliediatkine/Desktop/foundation-5/Spatial Audio and Sound Design.html" class="menubar">Text2</a></li>
 </li>

        <li class="divider"></li>
        <li class="has-dropdown">
      <li>    <a href="/Users/coraliediatkine/Desktop/foundation-5/Vocal Performance and Improvisation.html" class="menubar">Text3</a></li>
       
          </ul>

            

         

top barcss

Hi,

I've browsed the forum without success. I am trying to understand what are the items in the css file that correspond to the links in the top bar (not the top bar itself), in order to modify :
1. The vertical alignement or possibly the padding of the text in each tab
2. The style of the separators between each tab in the bar ( I am not sure I understand what the divider class is)
3. The color of each tab
4. Their vertical alignment in the top bar

I've been able to modify the top bar already. I'm just confused about the terminology in the css.

Thank you!

    											   <section class="top-bar-section">
       
      <ul class="left">
        <li class="divider"></li>
        <li class="has-dropdown">

        <li><a class="active"  href="/Users/coraliediatkine/Desktop/foundation-5/Biography.html" class="menubar">Text1</a></li>

        <li class="divider"></li>
                <li class="has-dropdown">
        <li><a class="active"  href="/Users/coraliediatkine/Desktop/foundation-5/Spatial Audio and Sound Design.html" class="menubar">Text2</a></li>
 </li>

        <li class="divider"></li>
        <li class="has-dropdown">
      <li>    <a href="/Users/coraliediatkine/Desktop/foundation-5/Vocal Performance and Improvisation.html" class="menubar">Text3</a></li>
       
          </ul>

            

         
coralie diatkine about 5 years ago

Thanks a lot, that's great. Sorry for not checking earlier. I'll try it and let you know how it worked.

Best

Bill Tran over 5 years ago

  1. The vertical alignment or possibly the padding of the text in each tab

If you want to add padding, in your css add a margin to the selector. (margin: 0 15px)

.top-bar-section li:not(.has-form) a:not(.button) {
padding: 0 15px;
line-height: 45px;
background: #333;
margin: 0 15px
}

  1. The style of the separators between each tab in the bar ( I am not sure I understand what the divider class is)

Divider class actually put shows a line that separates each tab.

  1. The color of each tab

.top-bar-section li.active:not(.has-form) a:not(.button){
background-color: Black(this should be the color of your tab)
}

  1. Their vertical alignment in the top bar

The vertical top bar auto aligns, so if you change the height of the top bar it will align automatically.