Milada Posted November 4, 2016 Share Posted November 4, 2016 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 comment Share on other sites More sharing options...
dsonesuk Posted November 4, 2016 Share Posted November 4, 2016 (edited) 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 November 4, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
Milada Posted November 4, 2016 Author Share Posted November 4, 2016 Hallo dsonesuk, I am very glad for your help and answer, but I am really a fresh newbie. If I got it right, I should put it into a style sheet, right? But what are "ABOVE any media queries" - how do I find them with Ctrl+F? Thank you again and regards, Milada Link to comment Share on other sites More sharing options...
dsonesuk Posted November 4, 2016 Share Posted November 4, 2016 http://www.w3schools.com/css/css3_mediaqueries.asp Link to comment Share on other sites More sharing options...
Milada Posted November 4, 2016 Author Share Posted November 4, 2016 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 comment Share on other sites More sharing options...
Milada Posted November 4, 2016 Author Share Posted November 4, 2016 actually I see it worked but only for flags - they are centred! but I want the flags to be under the menu, which is Home, Care, Elemis, Recipes Link to comment Share on other sites More sharing options...
dsonesuk Posted November 4, 2016 Share Posted November 4, 2016 You want 1 row for main menu items, a second row for language menu items, yes! add a blank empty li element after "Elemis" as a separator, this will force languages to a second row, OR place languages as another menu below main menu links. Link to comment Share on other sites More sharing options...
Milada Posted November 5, 2016 Author Share Posted November 5, 2016 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 comment Share on other sites More sharing options...
dsonesuk Posted November 5, 2016 Share Posted November 5, 2016 (edited) ????? 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 November 5, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
Milada Posted November 5, 2016 Author Share Posted November 5, 2016 I am sorry, but I do not understand. In which file should I look it up and paste it? I copied you a li element from here: http://www.w3schools.com/tags/tag_li.asp It is not correct? Can you please help me? I am no an IT Link to comment Share on other sites More sharing options...
dsonesuk Posted November 5, 2016 Share Posted November 5, 2016 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 comment Share on other sites More sharing options...
Milada Posted November 5, 2016 Author Share Posted November 5, 2016 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 comment Share on other sites More sharing options...
dsonesuk Posted November 5, 2016 Share Posted November 5, 2016 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 comment Share on other sites More sharing options...
Milada Posted November 5, 2016 Author Share Posted November 5, 2016 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 comment Share on other sites More sharing options...
dsonesuk Posted November 5, 2016 Share Posted November 5, 2016 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 comment Share on other sites More sharing options...
Milada Posted November 5, 2016 Author Share Posted November 5, 2016 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 comment Share on other sites More sharing options...
dsonesuk Posted November 5, 2016 Share Posted November 5, 2016 I can't! i don't have access to your cpanel to identify where you pasted, and what you pasted? Best I can suggest is to reverse what you have done. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now