Top Language Switch (CSS example for you)

  • Resolved Anticosti

    (@anticosti)


    7 years, 1 month ago

    For the ones interested, here’s how I I played with CSS to create my Top Language Switch (Screenshot here)

    div.top-lang-switch,
div.top-menu-switch {
  		padding: 0px !important;
  		border: 0px solid #FFFFFF;
  		text-align: right;
		}
div.top-lang-switch ul,
div.top-menu-switch ul {
  		padding: 0px !important;
  		margin-top: 0px;
		}
div.top-lang-switch ul li,
div.top-menu-switch ul li {
  		float: right;
  		margin: 0px 0px 0px 1px;
  		border: 0px solid;
  		text-align: center;
		}
div.top-lang-switch ul li a,
div.top-menu-switch ul li a {
  		color: #FFFFFF !important;
  		background-color: #8c8c8c;
  		font-size: 15px;
  		font-weight: 600;
  		text-transform: uppercase;
  		padding: 35px 7px 7px 7px;
  		margin: 0px 0px 0px 0px;
		}
html[lang="fr-FR"] div.top-menu-switch ul li#menu-item-language-fr a span,
html[lang="en-US"] div.top-menu-switch ul li#menu-item-language-en a span{
		width: 35px !important;
		min-width: 35px !important;
  		}
div.top-lang-switch ul li.active a,
html[lang="fr-FR"]  div.top-menu-switch ul li#menu-item-language-fr a,
html[lang="en-US"]  div.top-menu-switch ul li#menu-item-language-en a {
  		color: #FFFFFF;
  		border-bottom: 5px solid #FFFFFF;
		}
div.top-menu-switch ul li#menu-item-71 a {
  		background-color: transparent !important;
  		font-size: 0px;
		}
div.top-menu-switch ul li#menu-item-71 a::before {
  		font-family: FontAwesome !important;
		content: "\f090";
  		margin-right: 5px;
		font-size: 18px;
		}
div.top-menu-switch ul li#menu-item-72 a {
  		background-color: transparent !important;
  		font-size: 0px;
		}
div.top-menu-switch ul li#menu-item-72 a::before {
  		font-family: FontAwesome !important;
		content: "\f08b";
  		margin-right: 5px;
		font-size: 18px;
		}
html[lang="fr-FR"]  div.top-menu-switch ul li#menu-item-language-fr a {
  		background-color: #0099cc;
		}
html[lang="en-US"]  div.top-menu-switch ul li#menu-item-language-en a {
  		background-color: #ff0000;
		}

    If this may be of some help to some of you…?

Viewing 6 replies - 1 through 6 (of 6 total)

  • Thank you, it looks beautiful. I will try.

    Thread Starter Anticosti

    (@anticosti)

    Just to help out @valexar
    Let’s make this one as Resolved.

    Anticosti, thanks for sharing!
    Could you add your html block with divs, please ?

    Thread Starter Anticosti

    (@anticosti)

    Hi @l1va,
    Here’s the source code for my top div:

    <div class="ult-wrapper wrapper " id="wrapper-46">

<div class="ult-container  container " id="container-46">
<div class="row">
		<div class="ult-column col-md-12 " id="col-46-1">
			<div class="colwrapper"><div class="top-menu-switch widget widget_nav_menu inner-container"><div class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-language-en" class="wpm-languages menu-item menu-item-type-custom menu-item-object-custom menu-item-language-en"><a href="https://www.mysite.com/en/2017/09/01/article-02/"><span>EN</span></a></li>
<li id="menu-item-language-fr" class="wpm-languages menu-item menu-item-type-custom menu-item-object-custom menu-item-language-fr"><a href="https://www.mysite.com/2017/09/01/article-02/"><span>FR</span></a></li>
<li id="menu-item-72" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-72"><a title="Disconnect" href="https://www.mysite.com/wp-login.php?action=logout&_wpnonce=8dadc21c1d">Logout</a></li>
</ul></div></div></div>
		</div>
		</div></div>
</div>

    Thank you again!
    I simplified a little: 

    div.lang-switch {
  		padding: 0px !important;
  		border: 0px solid #FFFFFF;
  		text-align: right;
		}
div.lang-switch ul {
  		padding: 0px !important;
  		margin-top: 0px;
		list-style-type: none;
		}
div.lang-switch ul li {
  		float: right;
  		margin: 0px 0px 0px 1px;
  		border: 0px solid;
  		text-align: center;
		}
div.lang-switch ul li a {
  		color: #FFFFFF !important;
  		background-color: #8c8c8c;
  		font-size: 15px;
  		font-weight: 600;
  		text-transform: uppercase;
  		padding: 35px 7px 7px 7px;
  		margin: 0px 0px 0px 0px;
		}
html[lang="ru-RU"] div.lang-switch ul li#language-ru a span,
html[lang="en-US"] div.lang-switch ul li#language-en a span{
		width: 35px !important;
		min-width: 35px !important;
  		}
div.lang-switch ul li.active a,
html[lang="ru-RU"]  div.lang-switch ul li#language-ru a,
html[lang="en-US"]  div.lang-switch ul li#language-en a {
  		color: #FFFFFF;
  		border-bottom: 5px solid #FFFFFF;
		}
html[lang="ru-RU"]  div.lang-switch ul li#language-ru a {
  		background-color: #0099cc;
		}
html[lang="en-US"]  div.lang-switch ul li#language-en a {
  		background-color: #ff0000;
		}

    And html : 

    <div class="lang-switch">
	<ul>
		<li id="language-en">
			<a href="?lang=en">
				<span>EN</span>
			</a>
		</li>
		<li id="language-ru">
			<a href="?lang=ru">
				<span>RU</span>
			</a>
		</li>
	</ul>
</div>
    Thread Starter Anticosti

    (@anticosti)

    @l1va Cool! Happy to know it’s working for you. Thanks for sharing your modifs.

    See you!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Top Language Switch (CSS example for you)’ is closed to new replies.