Home › Forums › Themes Support › Claue › Mega Menu Customize

Topic Resolution: Resolved
Viewing 14 reply threads
Save
  • Author
    Posts
    • January 19, 2018 at 6:04 pm #16316
      Rahim

      Hi Harry,

      Hope you are doing fine.

      Could you please have a look to my website? https://look.ir

      I have installed Max Mega Menu and customized that.

      I just wonder is there any chance to bring back the menu badges or change the color of some words in the menu?

       

      Rahim Vaziri
      CEO & Founder at Look.ir

    • January 19, 2018 at 9:48 pm #16323
      Harry

      Hi Rahim,

      Please add below code and add class for menu item like as you did with original menu

      .mega-menu li.hot > a:after,
.mega-menu li.sale > a:after,
.mega-menu li.new > a:after {
	position: absolute;
	color: #fff;
	font-size: 9px;
	padding: 1px 7px 0;
	border-radius: 50px;
	right: -28px;
	top: -10px;
	line-height: 16px;
}
.mega-menu ul li.hot > a:after,
.mega-menu ul li.sale > a:after,
.mega-menu ul li.new > a:after {
	right: -3px;
	top: 5px;
}
.mega-menu li.hot > a:after {
	content: 'Hot';
	background: #ff3e11;
}
.mega-menu li.sale > a {
	color: #ec0101;
}
.mega-menu li.sale > a:after {
	content: 'Sale';
	background: #ffa800;
}
.mega-menu li.new > a:after {
	content: 'New';
	background: #01bad4;
}

      Best regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • January 19, 2018 at 9:58 pm #16325
      Rahim

      Hi Harry,

      Where should I add these codes?

      Max Mega Menu custom css? or the Style.css of the child theme? Or somewhere else?

       

      Rahim Vaziri
      CEO & Founder at Look.ir

    • January 19, 2018 at 10:53 pm #16328
      Harry

      Hi Rahim,

      Please add in Claue > Theme Option > General Layout > Custom CSS

       

      Best regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • January 21, 2018 at 10:40 pm #16360
      Rahim

      Hi Harry,

      Hope you are doing fine.

      I added the css and added the word for example “new” in the menu in optional css.

      but nothing has happened in the mega menu!

      Can you please have a look?

      Rahim Vaziri
      CEO & Founder at Look.ir

    • January 22, 2018 at 11:36 am #16367
      Harry

      Hi Rahim,

      Sorry for wrong class, please use new code

      .mega-menu li.mega-hot > a:after,
.mega-menu li.mega-sale > a:after,
.mega-menu li.mega-new > a:after {
	position: absolute;
	color: #fff;
	font-size: 9px;
	padding: 1px 7px 0;
	border-radius: 50px;
	right: -28px;
	top: -10px;
	line-height: 16px;
}
.mega-menu ul li.mega-hot > a:after,
.mega-menu ul li.mega-sale > a:after,
.mega-menu ul li.mega-new > a:after {
	right: -3px;
	top: 5px;
}
.mega-menu li.mega-hot > a:after {
	content: 'Hot';
	background: #ff3e11;
}
.mega-menu li.mega-sale > a {
	color: #ec0101;
}
.mega-menu li.mega-sale > a:after {
	content: 'Sale';
	background: #ffa800;
}
.mega-menu li.mega-new > a:after {
	content: 'New';
	background: #01bad4;
}

      Best regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • January 22, 2018 at 2:55 pm #16373
      Rahim
      This reply has been marked as private.

      Rahim Vaziri
      CEO & Founder at Look.ir

    • January 22, 2018 at 4:59 pm #16375
      Harry

      Hi Rahim,

      Sorry the code of mega menu override my code please use below code

      .mega-menu li.mega-hot > a::before, 
.mega-menu li.mega-sale > a::before, 
.mega-menu li.mega-new > a::before {
	position: absolute;
	color: #fff;
	font-size: 9px !important;
	padding: 1px 7px 0;
	border-radius: 3px;
	right: -28px;
	top: -10px;
	line-height: 15px !important;
	bottom: auto;
	left: auto;
font-family: arial, sans-serif;
}
.mega-menu ul li.mega-hot > a:before,
.mega-menu ul li.mega-sale > a:before,
.mega-menu ul li.mega-new > a:before {
	right: -3px;
	top: 5px;
}
.mega-menu li.mega-hot > a:before {
	content: 'Hot';
	background: #ff3e11;
}
.mega-menu li.mega-sale > a {
	color: #ec0101;
}
.mega-menu li.mega-sale > a:before {
	content: 'Sale';
	background: #ffa800;
}
.mega-menu li.mega-new > a:before {
	content: 'New';
	background: #01bad4;
}

      Best regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • January 22, 2018 at 8:52 pm #16394
      Rahim

      Hi Harry,

      Thank you for the help.

      Now the badges work fine in my menu.

      But could you please have a look to my menu?

      As you know my wesite is in RTL direction.

      So how can I have the badges on the left of the word?

      Rahim Vaziri
      CEO & Founder at Look.ir

    • January 22, 2018 at 10:25 pm #16397
      Harry

      Hi Rahim,

      Please add more code

      .rtl #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item a.mega-menu-link::before {
      float: left;
      }

      Best regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • January 22, 2018 at 10:38 pm #16400
      Rahim
      This reply has been marked as private.

      Rahim Vaziri
      CEO & Founder at Look.ir

    • January 22, 2018 at 11:20 pm #16403
      Harry

      Hi,

      We hide badge on mobile because it display not good.

      Best regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • January 22, 2018 at 11:24 pm #16404
      Rahim

      Hi Harry,

      Oh, I understand that.

      I just checked my mobile view of the menu and realized that the badge is so far from the menu word!

      Is there any chance to put it close to the word on it’s left like desktop view?

      Rahim Vaziri
      CEO & Founder at Look.ir

    • January 22, 2018 at 11:36 pm #16405
      Harry

      Hi Rahim,

      Sorry i tried but don’t have solution for this.

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • January 22, 2018 at 11:42 pm #16406
      Rahim

      Harry,

      I appreciate and respect your try. 🙂

      Best support by you.

      Good Night.

      Rahim Vaziri
      CEO & Founder at Look.ir

  • Author
    Posts
Viewing 14 reply threads
Save

You must be logged in to reply to this topic.