0

Hello,

I am trying to create horizontal navigation NOT vertical navigation. What I have right now is vertical navigation.

<div class="cd-tabs">
    <nav>
        <ul class="cd-tabs-navigation">
            <li><a data-content="inbox" class="selected" href="#0">Inbox</a></li>
            <li><a data-content="new" href="#0">New</a></li>
            <li><a data-content="gallery" href="#0">Gallery</a></li>

        </ul> <!-- cd-tabs-navigation -->
    </nav>

style.css

  .cd-tabs-navigation {
    /* tabbed on top on big devices */
    width: 200px;/*auto;*/
    background-color: #605ca8;
    box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
  }

How turn it into horizontal navigation?

3
Contributors
3
Replies
24
Views
3 Years
Discussion Span
Last Post by marqusG
0

first give the ul:
list-style:none;
to remove the list bullets,

this give the li:
float:left;
to make it float side by side, and sure give it some padding or margin for the spacing ;)

0

Hello,

index.php

<div class="cd-tabs">
    <nav>
        <ul class="cd-tabs-navigation">
            <li><a data-content="inbox" class="selected" href="#0">Inbox</a></li>
            <li><a data-content="new" href="#0">New</a></li>
            <li><a data-content="gallery" href="#0">Gallery</a></li>

        </ul> <!-- cd-tabs-navigation -->
    </nav>

styleT.css

/* .cd-tabs-navigation */
.cd-tabs-navigation ul{list-style-type:none; margin: 0; padding: 0; float:left; background-color: blue;}
/* .cd-tabs-navigation */ 
.cd-tabs-navigation li{float:left; display: inline; background-color: blue; /*width: 100px; height: 50px; text-align: center; */ vertical-align: middle;} 

I try this and the navigation turns out vertical. How to make it horizontal?

0

Hi davy. Your code work, except it give no margin between li elements so they appear to be a unique word :)
Probably, you have some other rule in your css which prevents the list to be horizontal. Have you some general list rule suche as, for example:
ul, ol li{display: block}?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.