Jump to content

Menu and language flags in one row: how to put flags on a following row?


Recommended Posts

Dear team,


I have a site layou like this now: menu and language flags are in one same line/row. I only need to put the flags under the menu, centered.

As if I clicked the Enter button in front of the first flag and put them all on a following row.

Can you please tell me what is the code for that?

Where should I paste it?

Thank you in advance.

Milada

Link to post
Share on other sites

THIS BUGGY FORUM NO LONGER ALLOWS margin-left: IN code box OR AS PLAIN TEXT

 

/*flags centred below text */
.lang-item img {
bottom: 7px;
left: 50%;
m@rgin-left: -8px;
position: absolute;
}

 

 

OR

 

/*flags centred above text */

.lang-item img {
left: 50%;
m@rgin-left: -8px;

position: absolute;
top: 7px;
}

 

NOTE: because forum is becoming like IE of the past I had to use '@' instead of 'a' in margin for it to be accepted

 

Paste it in your themes css file below current css, but! ABOVE any media queries.

Edited by dsonesuk
Link to post
Share on other sites

I have put it firstly before this command: /* # Media Queries

---------------------------------------------------------------------------------------------------- */
it did not work
then I put it before: @media only screen and (max-width: 1340px) {
it did not work either
I chose one of these two as you said any...
Replace "@" with an "a" of course
I do not know anymore what is wrong
Link to post
Share on other sites

dsonesuk, I am glad that you try to help. I understand that I will put tag:

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

 

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

 

in front of Elemis. But in which file? I tried both functions.php and style.css, but there is no mention of "Elemis". Where should I paste it?

Thank you in advance.

Link to post
Share on other sites

????? its part of the menu? you must have added 'Elamis' as a menu link and url, well then add a blank menu after 'Elamis' at same indentation level and give it a custom class name. Also it won't be a ol but a li element, it will contain empty link to http://moreyouthfulskin.com/en/# use ' ' as title name.

Edited by dsonesuk
Link to post
Share on other sites

IT NOT pasted in anywhere, you log in to wordpress backend, go to appearance -> menu this is where all your current menu item links should have been created, All you are doing is adding a blank menu list to use as separator, IT will create this all you have to is click create custom menu link, fill in required details save, and this new menu will appear.

Link to post
Share on other sites

I created a new menu called Flags - is it what you mean? How do I add this menu under the main menu (which is assigned to After header menu)?

Further I deleted both

/*flags centred below text */
.lang-item img {
bottom: 7px;
left: 50%;
m@rgin-left: -8px;
position: absolute;
}

AND

/*flags centred above text */

.lang-item img {
left: 50%;
m@rgin-left: -8px;

position: absolute;
top: 7px;
}

but now the menu is left - as the space designed for flags occupies the center.

What should I do?

Link to post
Share on other sites

YOU add new menu and use as separator, you use the custom class name to give it a style such as as display: list-item; this will cause the flags to be on a row below it giving you two rows, row 1 will have Home, Care, Recipes, Elemis, row 2 will be the flags, you then style the parent container to centre both rows using text-align: center; because the list-item use display: inline-block which makes these element act as though they are text and centre themselves.

Link to post
Share on other sites

I really am not an IT, my profession has nothing to do with IT. I would like to ask you a favour: could you please simply write me SIMPLE steps on how to proceed? Now I created a new menu, called flags, which contains a Language switcher. How should I proceed afterwards?

Thank you in advance for writing me a simple step by step instruction, which I would only MECHANICALLY follow.

Link to post
Share on other sites

I can't! I don't if your wordpress is using default menu creation, or some other plugin, I can't know what it will! or will not! accept to creat a blank separator menu option, if it allows custom classes, what classes it uses by default. You need to read up documentation on default creating menu, or possibly used menu plugin, and also creating menu separators preferably from WordPress forum. In fact anything relating to WordPress functionality should be asked in a WordPress related forum, anything in regards to css presentation can be asked here.

Link to post
Share on other sites

I will repeat myself but as I am newbie not knowing anything about IT, I cannot judge if I should ask on a css forum or php forum or another forum.

Can you please remedy the issue concerning centering? It suddenly does not work after I pasted your codes into my cPanel files.

How do I remedy this?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...