Customize sidenav with svg, media queries, and jquery

Using the MDBootstrap Sidenav
Horizontal nav becomes fixed at 992 breakpoint and down
Sidenav has two collapse states - 1 with just icons and 2nd off screen drawer style
Svg bottom layer changes color to match the link backgrounds
scroll changes sidenav link background color as well as onclick
Beta version deployed in the wild

SVG setup

svg class="sidebarsvg" preserveAspectRatio="none" viewBox="0 0 180 1024" transform="scale(0.00555556 0.00097656)"
From the exported svg (using Affinity Designer removed all the header info except what is shown above. Remove width and height percentages, add the preserverAspectRatio none which allows the svg to flow into the sizes needed. the transform takes the view box from 0 0 180 1024 to 0 0 1 1 which helps it adjust to any size. the 0.00555556 is simple 1/180 and 0.0009765 is 1/1024
International

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Experimental

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Relaxing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Beloved

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Rapid

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Magical

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Testimonials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.

Anna Deynah

Web Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.

John Doe

Web Developer

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Maria Kate

Photographer

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.

Our pricing plans

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.

Basic plan

59$

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.

Buy now
Premium plan

79$

Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.

Buy now
Advanced plan

99$

At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.

Buy now

Contact us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?

Send

  • San Francisco, CA 94126, USA