Replace WordPress Menu Items With Images

Hello,

I've created images of buttons that I want to use for my navigation bar. To do this I need to replace each menu item title with an image.

I've tried countless tutorials & been on live chat & I still cant get it working.

This is what we tried on the live chat.

Adding a class name to the menu item.
Then using this in my Divi theme custom CSS

.about-button a {?padding: 10px 30px;?background-image: url(https://miniplanet.w…2019/01/about-button-web-1.png);?background-size: cover;?background-position: center center;?background-repeat: no-repeat;?}

According to the guy, this worked in browser inspect element but once I pasted it into my custom CSS nothing would happen.

He recommended a plugin which works (kind of). But it hasn't been updated in a long time, and I'd rather have as little plugins as possible installed on my site so hoping this can be achieved without.

Ideally, I also need this to be responsive for different screen sizes.

If anyones got any suggestions I'd be eternally grateful as Its driving me a little crazy at the minute!

Thank you!

  • Lewis
    • Flash Drive

    Found temporary solution pasting HTML image code directly into custom link label. Still looking for a solution though where I don’t have to use an exact sized image to allow for resizing on different devices without appearing blurry.

  • Jayman Pandya
    • Recruit

    Hi Lewis,

    I have setup a demo site where I have implemented the menu from scratch. I have created an account with admin access for you on that demo installation so that you can browse around and have a look at how the menu was integrated. You can have a look and implement it on your site.

    To give you a brief idea, I will note down what was done.

    Step 1: Logo and Menu links were removed from Revolution Slider
    Step 2 : A new menu was created with the name "Test menu" in Appearance -> Menus
    Step 3 : Custom styles were added in Appearance -> Customize
    Step 4 : FontAwesome was added by adding the following code in the functions.php of the active theme.

    function wmpudev_enqueue_icon_stylesheet() {
    	wp_register_style( 'fontawesome', 'https://use.fontawesome.com/releases/v5.6.3/css/all.css' );
    	wp_enqueue_style( 'fontawesome');
    }
    add_action( 'wp_enqueue_scripts', 'wmpudev_enqueue_icon_stylesheet' );

    Please write back to this thread in case of any confusion.

    Thank you
    Jayman

    • Lewis
      • Flash Drive

      That looks great thanks so much!

      They were a little small so I've increased the width & icon font size. Im having trouble increasing the text font size though, the first 'font-size:18' at the top of the custom CSS doesn't seem to have an effect on anything & using the theme customisers font size only gets it to 24pt.

      Would you mind letting me know what I could add to increase that? And also centre the text?

      I'm having trouble as well centring the buttons vertically in line with the logo.

      I also really liked my little reflection on the previous buttons I had created. (Where it goes from light green to dark with a sharp line). I understand if thats not possible with CSS, they already look great just wanted to mention it just in case.

      I've made the edits on my live website as I noticed the menu was already there & its not a working website at the minute. Your welcome to fiddle on the live version if its easier.

      Thank you so much again. Its looking fantastic!

  • Rupok
    • Support Ninja

    Hi Lewis,

    Can you please try the following custom CSS code? You can use plugins for applying custom CSS code (e.g. https://wordpress.org/plugins/simple-custom-css/) but I'll prefer adding the following code in your WordPress site Dashboard > Appearance > Customize > Additional CSS section.

    ul#top-menu a i {
        margin-left: -50px;
        position: absolute;
        top: -12px;
    }
    @media only screen and (min-width: 981px){
    .et_header_style_left #et-top-navigation {
        padding: 50px 0;
    }
    }

    The code above should make your menu texts center aligned, bring the menu icons aligned with menu text, and also align the whole menu with your logo.

    If you have any kind of caching on your site, please clear the cache and then check if it works. If it doesn't work, please let us know. We will be very glad to assist further.

    Have a nice day. Cheers!
    Rupok

  • Lewis
    • Flash Drive

    Hi @rupokify. Thanks for your reply. I've tweaked it a bit & its looking good but can't seem to get it right still.

    Can you tell me which bit of this code relates to just the text labels if at all? I keep trying editing bits but nothing has an effect on the text at all.

    #main-header #top-menu span.about-button {
    	font-size:18px !important;
    } 
    
    #logo {
    	max-height: 125% !important;
    }
    
    .entry-title, #main-footer, #et_top_search {
    	display: none;
    }
    
    .home .entry-content {
    	position: absolute;
    	top: 0;
    }
    
    .nav li {
    	background: #c3d650;
    background: -moz-linear-gradient(top, #c3d650 0%, #9bac37 100%);
    background: -webkit-linear-gradient(top, #c3d650 0%,#9bac37 100%);
    background: linear-gradient(to bottom, #c3d650 0%,#9bac37 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d650', endColorstr='#9bac37',GradientType=0 );
    	display: inline-block;
    	color: #fff;
    	padding: 14px 22px 10px 18px!important;
    	border-radius: 50PX;
    	text-align: center;
    	width: 140px;
      margin: 0 2px;
    }
    
    .nav li i {
    	text-align: left;
    	float:left;
    	font-size: 15px !important;
      margin-top: -2px;
    }
    
    .nav li.play {background: #f4b33b;
    background: -moz-linear-gradient(top, #f4b33b 0%, #c78b2e 100%);
    background: -webkit-linear-gradient(top, #f4b33b 0%,#c78b2e 100%);
    background: linear-gradient(to bottom, #f4b33b 0%,#c78b2e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b33b', endColorstr='#c78b2e',GradientType=0 );
    }
    
    .nav li a {
    	color: #fff !important;
    	padding-bottom:5px !important;
    }
    
    ul#top-menu a i {
        margin-left: -20px;
        position: absolute;
        top: 0px;
    }
    @media only screen and (min-width: 981px){
    .et_header_style_left #et-top-navigation {
        padding: 50px 0;
    }
    }

    I want to move the text to be central in the space between the icon & side. So Icon left aligned, text centred. They're too close together at the moment. I noticed each menu items had a custom class assigned. So I tried;

    .news {
        margin-left: 20px;
    }

    But it wouldn't do anything. Also the icons should be in the same place for each button but they're not. The 'play' button especially. The icon/text is way off to the right compared to the rest.

    You can see what I mean on this page;

    https://miniplanet.woodroydcreative.co.uk/about/

    Thanks again for your help. :slight_smile:

  • Jayman Pandya
    • Recruit

    You will have to make some modifications in below mentioned classes. The snippet that I have shared only has the properties that change.

    .nav li {
         width: 155px;
    }
    
    ul#top-menu a i {
        left: 14px;
    }
    
    #top-menu li {
        text-align: center;
    }

    This should do what you intend to do with the alignments. Please write back to this thread if you need any further assistance.

    Thank you
    Jayman

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.