Return to previous page

Menu Items Alignment - by rj - on WordPress WooCommerce support

This topic has 7 replies, 2 voices, and was last updated 5 years, 2 months ago ago by Olga Barlow

Participant

October 3, 2020 at 13:59

Can you please please please help me in aligning the last two menu items with other menu items and the styling.

I badly need your help.

Also below are the codes that you gave me earlier.. but I think it needs some changes.

/* Language Switcher Custom CSS Starts Here */

.site-header a.wpml-ls-item-toggle {
  background-color: transparent;
  border: none;
}
.site-header .wpml-ls-legacy-dropdown a:hover,
.site-header .wpml-ls-legacy-dropdown a:focus,
.site-header .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover > a {
  background-color: transparent;
}
.site-header .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after {
  content: "\e905";
  font-family: "xstore-icons";
  font-size: .57em;
  margin-left: 7px;
  background: none;
  border: none;
  position: static;
  width: auto;
  height: auto;
}
.site-header .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
  padding: 0 !important;
		color: currentcolor;
  font-size: 1em;
  line-height: 30px;
}
.site-header .wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
  animation: et-toTop 0.3s;
  display: none;
  max-height: 49vh;
  width: 200px;
  padding: .6em 0 !important;
  overflow: auto;
  background: #fff;
  border: 1px solid #e1e1e1;
}
.site-header .wpml-ls-legacy-dropdown .wpml-ls-sub-menu li a {
  width: 100%;
  display: block;
  border: none;
  font-size: var(--content-zoom);
  padding: .6em 1.9em;
  color: #000;
  background-color: transparent;
}
.site-header .wpml-ls-legacy-dropdown .wpml-ls-sub-menu li a:hover {
  background: transparent;
  opacity: .7;
}
.site-header .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover .wpml-ls-sub-menu,
.site-header .wcml-dropdown li:hover.wcml-cs-active-currency .wcml-cs-submenu {
  display: block;
}
/* Language Switcher Custom CSS Ends Here */
/* Currency Switcher Custom CSS Starts Here */
.header-bottom .wcml-dropdown .wcml-cs-active-currency:hover>a {
    color: #222;
}
.header-bottom .sidebar-widget li a {
    font-size: 14px !important;
}
.header-bottom .wcml-dropdown a.wcml-cs-item-toggle:after {
    content: "\e905";
    font-family: "xstore-icons";
    font-size: .57em;
    margin-left: 7px;
    background: none;
    border: none;
    position: static;
    width: auto;
    height: auto;
}
.header-bottom ul.wcml-cs-submenu {
    animation: et-toTop 0.3s;
    display: none;
    max-height: 49vh;
    width: 200px;
    padding: .6em 0 !important;
    overflow: auto;
    background: #fff;
    border: 1px solid #e1e1e1;
}
.header-bottom .wcml-dropdown a.wcml-cs-item-toggle {
    padding-right: 0px;
}
/* Currency Switcher Custom CSS Ends Here */

Copied Theme version: 7.0.2

6 Answers

Olga Barlow

Participant

October 5, 2020 at 10:31

Hello,

Check now.

Regards

Copied

Olga Barlow

Participant

October 5, 2020 at 10:31

Hello,

Check now.

Regards

Copied

Participant

October 5, 2020 at 14:09

Thank you so so much! You guys rocks!
I will try myself to give final touch to styling. I will keep the topic open just in case I will be needing your help.

Copied

Olga Barlow

Participant

October 5, 2020 at 16:32

Hello,

You are welcome. If you have any question that is not related to this issue we would recommend you to create a new topic to avoid misunderstanding.

Regards

Copied

Participant

October 6, 2020 at 10:19

Hello

Just small changes please related to same topic

I have mentioned in below image…

https://prnt.sc/utylkz

Below is the final css I used..

/* Language Switcher Style Starts Here */
.et_b_header-menu .menu .wpml-ls-legacy-dropdown a.item-link, .et_b_header-menu .menu .wcml-dropdown a.item-link {
    display: none;
}

.site-header .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
    background: transparent;
		border: none;
}

.site-header .wpml-ls-legacy-dropdown a:hover,
.site-header .wpml-ls-legacy-dropdown a:focus,
.site-header .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover > a {
  background-color: transparent;
}

.site-header .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after {
  content: "\e905";
  font-family: "xstore-icons";
  font-size: .57em;
  margin-left: 7px;
  background: none;
  border: none;
  position: static;
  width: auto;
  height: auto;
}

.site-header .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
  padding: 0 !important;
	color: currentcolor;	
}

.site-header .wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
  animation: et-toTop 0.3s;
  display: none;
  max-height: 50vh;
  width: 200px;
  padding: .6em 0 !important;
  overflow: auto;
  background: #fff;
  border: 1px solid #e1e1e1;
}
.site-header .wpml-ls-legacy-dropdown .wpml-ls-sub-menu li a {
  width: 100%;
  display: block;
  border: none;
  font-size: var(--content-zoom);
  padding: .6em 1.9em;
  color: #000;
  background-color: transparent;
}

.site-header .wpml-ls-legacy-dropdown .wpml-ls-sub-menu li a:hover {
  background: transparent;
  opacity: .7;
}

.site-header .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover .wpml-ls-sub-menu {
  display: block;
}
/* Language Switcher Style Ends Here */

Copied

Olga Barlow

Participant

October 6, 2020 at 16:44

Hello,

Add the following custom in addition

.wpml-ls-legacy-dropdown {
    max-width: 100%;
}
.wpml-ls-legacy-dropdown .wpml-ls-item:hover {
    color: #888888;
}
.wpml-ls-legacy-dropdown a span {
    line-height: 1.5;
}

Regards

Copied