Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 19, 2023 at 11:23 am #1422991
    padclip

    Hello dear support Team,

    I’m currently finishing up a web page for a client, and having some trouble with the QuickCSS in Theme Options while using WPML.

    I have added some quickCSS to build the menu with the logo in the center, and the menu to either side of it.
    This is achieved by adding following CSS and works like a charm:

    .av-main-nav li:nth-child(3) {
    margin-right:300px;
}

@media only screen and (min-width: 990px) {
.html_header_top.html_header_sticky #header {
    position: fixed;
    top: 0px;
}
}

.html_top_nav_header .av-logo-container {
	top: -30px;	
    z-index: 999;
}

@media only screen and (max-width: 989px) {
.html_top_nav_header .av-logo-container {
	top: 0px;	
	left:0;
}
}

/*Up the menu on the logo and remove the container of the menu*/

.main_menu {
top: -85px;
}

#header #header_main_alternate .container {
height: 0px!important;
}

ul#avia-menu {
margin-right: -35px;
}

    When translating the menu though, the two margin-right distances need to be adjusted, to fit the different string length of the translations.
    This should be an easy fix, since I have different Theme Options for the different languages (DE/EN/FR).
    I adjusted each of the quickCSS fields in the theme options, to fit for all languages, but it seems like there is an issue when saving the theme options.

    While all the adjustments stay the same in the language specific QuickCSS field, only the Theme Options for the language i saved most recently get applied to all languages.

    To illustrate a little more clearly with just the first adjustment

    Theme Options (DE) : margin-right:300px –> Looking good on the DE page
    Theme Options (EN) : margin-right: 450px –> Looking good on the EN page
    Theme Options (FR) : margin-right: 320px —> Looking good on the FR page

    If I saved the changes on the EN Theme Options most recently, the menu on DE and FR is shifted, but EN looks good.
    Same applies to the other theme options.
    It seems like the most recently applied theme options, just overwrites the others – and I have no clue on how to fix it.

    October 22, 2023 at 9:31 pm #1423340
    Mike

    Hey padclip,
    Thank you for your patience, I recommend trying to add the language selector to your css, I checked your site and these are the language code that you are using:

    html[lang="de-DE"] 
html[lang="en-US"] 
html[lang="fr-FR"]

    So for example if the css above is for the DE language try adding the language like this:

    html[lang="de-DE"] #top .av-main-nav li:nth-child(3) {
    margin-right:300px;
}

@media only screen and (min-width: 990px) {
html[lang="de-DE"].html_header_top.html_header_sticky #header {
    position: fixed;
    top: 0px;
}
}

html[lang="de-DE"].html_top_nav_header .av-logo-container {
	top: -30px;	
    z-index: 999;
}

@media only screen and (max-width: 989px) {
html[lang="de-DE"].html_top_nav_header .av-logo-container {
	top: 0px;	
	left:0;
}
}

/*Up the menu on the logo and remove the container of the menu*/

html[lang="de-DE"] #top .main_menu {
top: -85px;
}

html[lang="de-DE"] #top #header #header_main_alternate .container {
height: 0px!important;
}

html[lang="de-DE"] #top ul#avia-menu {
margin-right: -35px;
}

    Then I would add all three languages to the WordPress ▸ Customize ▸ Additional CSS as it has top preference.

    Best regards,
    Mike

    November 18, 2023 at 3:41 pm #1425929
    padclip

    Sorry for the late reply – project got pushed back a little.

    Everything worked like explained – thank you!

    November 18, 2023 at 3:48 pm #1425931
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘QuickCSS in WPML theme options’ is closed to new replies.