Wednesday, April 12, 2017

Center Image on quick-nav attribute

I'm developing my first website using Laravel. I've used HTML, CSS and PHP before but I'm using a predefined layout by Metronic.

They use a quick-nav attribute and I was able to costumize almost everything but now I want to center the image.

Here is the code

        <nav class="quick-nav" >
           <a class="quick-nav-trigger" style="background-color: black" href="#0">
           <img src="path_to_image_here">
              <span aria-hidden="true"></span>
           </a>
           <ul>
              <li>
                 <a href="link_here" style="color: red" target="_blank" class="active">
                    <span>Example 1</span>
                    <i class="icon-basket"></i>
                 </a>
              </li>

              <li>
                <a href="link_here" target="_blank">
                   <span>Example 2</span>
                   <i class="icon-users"></i>
                </a>
              </li>

              <li>
                 <a href="link_here" target="_blank">
                    <span>Example 3</span>
                    <i class="icon-user"></i>
                 </a>
              </li>

              <li>
                 <a href="link_here" target="_blank">
                    <span>Example 4</span>
                    <i class="icon-graph"></i>
                 </a>
              </li>
           </ul>
        <span aria-hidden="true" class="quick-nav-bg" style="background: black"></span>
    </nav>
    <div class="quick-nav-overlay"</div>

And here are two images of how it is right now

Initial Quick-Navigation Bar

Extended Quick-Navigation Bar

As you can see the imagem is at the left upper corner at the moment.

Also is it possible to make it draggable? I wanted the user to place it wherever he/she wants but when I use the draggable attribute I get no response and it just sits there in the corner...this is just an add-on, no problem if it's not possible.

I've tried a bunch of given solutions out there but none seems to work...

Thanks in advance and if you need any additional info ask.



via AimForNuts

Advertisement