Polylang flags

Support Area Forums Umami Polylang flags

This topic contains 7 replies, has 2 voices, and was last updated by  Bill Robbins 3 years, 6 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
URL to the page in question: http://saltandpepper.hr
  • Author
    Posts
  • #35551

    Goran Milic
    Participant

    Hello Bill,

    Since I tried WPML plugin and found it very complicated for me, I have switched to Polylang which is easier to use for me and looks a little bit more lightweight.

    Anyhow there is a widget for flags, and I would like to put that widget on top of the menu, and under the logo. Sorry I know I had the same question for WPML and you helped me before, but somehow I am not able to do the same thing with new plugin.

    While I am positioning that widget in section under the logo, I would like to align the flags horizontally. This is what they say in Polylang documentation:

    How to display the widget flags horizontally?

    The appearance of your site is controlled by CSS rules placed in the file style.css in your theme directory. The appearance of the language switcher is controlled by the classes “lang-item” for all languages and “current-lang-item” for the current language.
    So you can add the following lines in style.css

    .lang-item {
    display: inline;
    }

    Thank you in advance for giving me the line for CSS to move the widget on top of the menu and put it inline.

    #35553

    Bill Robbins
    Moderator

    Hi Goran,

    Try adding this to the Custom CSS box in the Advanced tab of your theme options page:

    
    li.lang-item {
    	display: inline-block;
    }
    
    @media only screen and (min-width: 768px) {
    
    	.widget_polylang {
    		position: absolute;
    		top: 170px;
    		left: 0;
    		right: 0;
    		margin: 0;
    	}
    	
    	.widget_polylang ul {
    		margin: 0;
    	}
    	
    	#sidebar nav {
    		margin-top: 30px;
    	}
    
    }
    

    See how that works for you,
    Bill

    #35558

    Goran Milic
    Participant

    Bill I have just tried, but nothings changed. Everything is the completely the same.

    On Polylang forums they recommended someone to add this:

    #sidebar ul ul li.lang-item {
    background-image: none;
    display: inline;
    }

    Maybe this gives you some idea…

    #35560

    Bill Robbins
    Moderator

    In your Custom CSS there is a style that’s missing the closing bracket. That keeps any code below it from working. Remove these:

    
    #sidebar .lang_sel_list_horizontal ul li {
    	display: inline-block;
    	float: none;
    
    #lang-item {
        display: inline;
    }
    
    
    #35561

    Goran Milic
    Participant

    Great as always Bill, thank you very much.
    One more thing, if you visit the website from mobile phone you will get the flags under the menu.

    #35563

    Bill Robbins
    Moderator

    Glad that worked. They need need to stay under the menu on mobile since their distance from the top of the screen will be variable.

    Take care,
    Bill

    #35564

    Goran Milic
    Participant

    Thank you Bill. Have a nice day.

    #35565

    Bill Robbins
    Moderator

    You too Goran 🙂

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Polylang flags’ is closed to new replies.