Docs

[onefoursix]

re: laraboothairdressing.co.uk/home-page

How do we add images to the mega menu please? We would like to add an image above the various services when you hover over the hair menu button.

[Prasant Rai]

Hello There,

Thanks for writing in!

Would you mind providing a mockup? You can also walk-through following thread to implement images in mega menu:

https://community.theme.co/forums/topic/images-in-the-mega-menu/#post-159582

Let us know how it goes.

Thanks.

[onefoursix]

Mock up: http://laraboothairdressing.co.uk/wp-content/uploads/2016/04/Screen-Shot-2016-04-13-at-20.45.48.jpg

in the mockup, the red blocks are the images I want placing above each service on the mega menu. Can you provide the CSS and I will edit in each of the image urls.

Thanks

[Rupok]

Hi there,

Thanks for updating. Kindly follow this thread – https://community.theme.co/forums/topic/add-svg-images-to-mega-menu/

Hope this helps.

Cheers!

[onefoursix]

I would appreciate it if you could walk me through it please, as I am unsure how to add the svg code. When I tried it crashed the site and removed the menu.

Please walk me through it rather than refer me through to another post. Lazy support guys.

Need this asap too now….

[Zeshan]

Hi there,

You don’t need to enter complete SVG code in your menu label. Upload the SVG file in your site and then add it’s link to the menu using <img> tag. So for example, add this code in your menu label (see: http://prntscr.com/as3nmq):

<img src="URL_TO_YOUR_SVG_FILE">

Replace URL_TO_YOUR_SVG_FILE with your SVG file URL .

Thank you!

[onefoursix]

I cant upload an SVG file. It throws up errors.

I have sorted it another way though. Please review the page and look.

However it is not working properly on mobile. When clicking to expand a menu it expands a totally different menu.

Can you advise pls.

[Rupok]

Hi there,

Thanks for writing back. Your current setup too complex to handle on mobile device. It seems you have an empty link before the image link that creating confusion. Let’s remove this and decrease the image size for mobile with this CSS :

.x-navbar .mobile .sub-menu li a img {
  width: 70px;
}

I can’t assure that it will look great but you can try.

Cheers!

[onefoursix]

it hasnt worked. it is still bringing up the incorrect sub menu when using for mobile.

can you look into please? or at least give me the full walk through for putting the images on the mega menu properly pls?

[Rupok]

Hi there,

Thanks for updating. Did you follow the reply carefully? I can still see the extra anchor tag on your menu item that you need to remove. See – http://prntscr.com/asfzl2

If the issue still persist, provide your WordPress login credentials in a private reply so that we could check your setup.

Cheers!

[onefoursix]

This reply has been marked as private.

[Jack]

Hi there @onefoursix,

Thanks for writing in!

In the wp-admin > Appearance > Customize > Custom > CSS, add the following CSS:

body .desktop .x-nav .x-megamenu>.sub-menu>li {
    float: none;  
    width:auto !important;
    display:inline-block;
    vertical-align:top;
}

body .masthead-inline .x-navbar .desktop .sub-menu {
    text-align: center;
}

body .x-navbar .x-container {
    position: static;
}

If you wanted to change to using the SVG approach where you add it as a navigation label rather than a separate custom link, first you’ll need to register the SVG mime type, by default in WordPress .svgs are disabled, to add support, you can add the following code to a child themes functions.php

function x_allow_svg_mime_type( $mimes = array() ) {
	$mimes['svg'] = 'image/svg+xml';
	$mimes['svgz'] = 'image/svg+xml';
	return $mimes;
}
add_filter( 'upload_mimes', 'x_allow_svg_mime_type' );

Then you can go to your menu in the wp-admin > appearance > menus, remove the custom links with the images and just add <img src="//wp-content/uploads/your-image.svg"> to your navigation label.

Thank you!

[onefoursix]

OK – i am getting rather annoyed by this now. You are obviously not properly testing this and it is starting to waste my time.

Attached is a screenshot of what your code has done to the site. Also – it STILL doesnt work properly on mobile.

Do you actually understand the issue in hand here?????

[onefoursix]

screenshot viewable here – http://laraboothairdressing.co.uk/wp-content/uploads/2016/04/Screen-Shot-2016-04-15-at-15.01.28-2.png

[Rue Nel]

Hello There,

Please edit your menu and make sure that you only add an image in the navigation label;

<img class="noLightbox" src="http://laraboothairdressing.co.uk/wp-content/uploads/2016/04/colour-menu.png" />

Adding an <a> tag will not help because it is invalid. You can nest an <a> tag. It will just be invalid and will create issues in your site like what is happening now. Try edit your menu and test it again especially in mobile screens.

Please let us know how it goes.

[Author]

Posts