Member Avatar for davy_yg

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
  • 147 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by marqusG
Member Avatar for DarkBerzerk

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

Member Avatar for davy_yg

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?

Member Avatar for marqusG

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.