menu with svg - Printable Version

menu with svg - Printable Version

+- Sinisterly (https://sinister.ly)
+-- Forum: Design (https://sinister.ly/Forum-Design)
+--- Forum: Web Design (https://sinister.ly/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..