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?

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

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?

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}?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.