How can I use an icon or an image as my navigation menu selector, instead of underline or highlight, for Wordpress, in css?

user_19036082 0
Viewed 33

I am a novice as best please pardon me, but I'm learning. I can illustrate what I need with an image.

Vertical Navigation 'White Curved Tab as Selector':

image

This is my CSS now, it's vertical and I can rotate the text, the way it should be, I'm not too concerned now about the visual appearance, I just need to have the functionality..

I would like the title of the pages in the navigation bar, to have an overlay icon, SVG or png, to hover over it when the mouse moves over and to continue following the mouse cursor within in the bounds of the nav bar, not like an ordinary overlay image, and if page is selected to leave that image or icon there as the highlight, so the final result will look something like the image above.

Here is my CSS thus far:

`.body{}

`.mobile-menu-nav.moved {
    max-width: 75px;
    width: 75px`
         
 }


 #head{
     min-width: 100%;
     padding:0px;
     margin-left: -200px;
     margin-right: -200px;
     position:cover
}
 #main-wrapper{
    min-width: 100%;
    padding:0px;
    margin-left: -200px;
    margin-right: -200px;
    position:cover
}
  .menu {
   width: 60px;
   height: 100%;
   position: left;
   border-radius: 15px; 
   border: 1px solid #00F;
 } 

  .mobile-menu-nav li a {
   font-family: Arial, sans-serif;
   font-size: 12px;
   color: #FFF;
   background-color: transparent;
   width: 100px;
   height: 22%;
   border: 1px solid transparent;
   margin: auto;
   margin-top: 50%;
   margin-bottom: 50%;
   margin-left: -15px;
   position: center;
   transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
 }
   -o-transform: rotate(-90deg);
 `

https://sproutsa.co.za

Thanks much.

wordpress css
1 Answers

I think it would be the best to use ::after or ::before

 .mobile-menu-nav li a:after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: transparent url('../images/your_image.svg') no-repeat;
    background-size: contain;
    background-position: center;
}

I have added background size and position, but ofcourse style it as you need it. Using this solution you can manipulate images using background properties.

Second similar solution is:

.mobile-menu-nav li a {
   display: flex;
}

.mobile-menu-nav li a::after{
    content: url('../images/your_image.svg');
    width: 20px;
    padding-left: 8px;
}

SVG should contain itself inside after element, like background-size: contain; so it works fine, but it won't work for images (.png, .jpg) and you can't change those. You can only prepare .png image to be final size.

Use ::after or ::before depending on position you want icons to be, right or left.

user_196980030
Related