[prudruhuph]

i want to create a horizontal menu with svg icon on the top of text

something like

Code:

[home icon svg]      [second icon]
        Home                 second page

i have SVG code ..
but i am not able to write a css for this..

[Inori]

If you're ok with using bootstrap:

Code:

<div class="container-fluid">
   <nav class="navbar navbar-default">
       <div class="container">
           <div class="navbar-header">
             <a class="navbar-brand" href="#">Site name</a>
           </div>
           <ul class="nav navbar-nav">
               <li>
                   <svg></svg>
                   <a href="#">Home</a>
               </li>
               <li>
                   <svg></svg>
                   <a href="#">Second page</a>
               </li>
           </ul>
       </div>
   </nav>
</div>

[prudruhuph]

If you're ok with using bootstrap:

Code:

<div class="container-fluid">
   <nav class="navbar navbar-default">
       <div class="container">
           <div class="navbar-header">
             <a class="navbar-brand" href="#">Site name</a>
           </div>
           <ul class="nav navbar-nav">
               <li>
                   <svg></svg>
                   <a href="#">Home</a>
               </li>
               <li>
                   <svg></svg>
                   <a href="#">Second page</a>
               </li>
           </ul>
       </div>
   </nav>
</div>

its not what i am looking for
this is giving me

Code:

{SCG} Home

menu like we are using here on sinister.ly..

but i want SVG and below it its text

[SVG home icon]
home


thanks anyway

[Inori]

If you're ok with using bootstrap:

Code:

<div class="container-fluid">
   <nav class="navbar navbar-default">
       <div class="container">
           <div class="navbar-header">
             <a class="navbar-brand" href="#">Site name</a>
           </div>
           <ul class="nav navbar-nav">
               <li>
                   <svg></svg>
                   <a href="#">Home</a>
               </li>
               <li>
                   <svg></svg>
                   <a href="#">Second page</a>
               </li>
           </ul>
       </div>
   </nav>
</div>

its not what i am looking for
this is giving me

Code:

{SCG} Home

menu like we are using here on sinister.ly..

but i want SVG and below it its text

[SVG home icon]
    home


thanks anyway

You need to actually load jQuery and Bootstrap for this to work. It's CSS, not magic.

[prudruhuph]

If you're ok with using bootstrap:

Code:

<div class="container-fluid">
   <nav class="navbar navbar-default">
       <div class="container">
           <div class="navbar-header">
             <a class="navbar-brand" href="#">Site name</a>
           </div>
           <ul class="nav navbar-nav">
               <li>
                   <svg></svg>
                   <a href="#">Home</a>
               </li>
               <li>
                   <svg></svg>
                   <a href="#">Second page</a>
               </li>
           </ul>
       </div>
   </nav>
</div>

its not what i am looking for
this is giving me

Code:

{SCG} Home

menu like we are using here on sinister.ly..

but i want SVG and below it its text

[SVG home icon]
    home


thanks anyway

You need to actually load jQuery and Bootstrap for this to work. It's CSS, not magic.

LOL
i no longer need it
thanks anyway..