menu with svg - Printable Version

menu with svg - Printable Version

+- Sinisterly (https://sinister.li)
+-- Forum: Design (https://sinister.li/Forum-Design)
+--- Forum: Web Design (https://sinister.li/Forum-Web-Design)
+--- Thread: menu with svg (/Thread-menu-with-svg)

menu with svg - prudruhuph - 03-20-2017

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..

RE: menu with svg - Inori - 03-21-2017

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>

RE: menu with svg - prudruhuph - 03-21-2017

(03-21-2017, 01:19 AM)Inori Wrote: 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 Smile

RE: menu with svg - Inori - 03-21-2017

(03-21-2017, 03:27 PM)prudruhuph Wrote:
(03-21-2017, 01:19 AM)Inori Wrote: 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.

RE: menu with svg - prudruhuph - 03-21-2017

(03-21-2017, 03:33 PM)Inori Wrote:
(03-21-2017, 03:27 PM)prudruhuph Wrote:
(03-21-2017, 01:19 AM)Inori Wrote: 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 Smile

thanks anyway..