Language switcher in mobile and menu child-items positions

– why won’t it go all the way to the right?

On your screen you mean, it’s because the navigation has a maximum width of 1080 pixels:

.main-navigation {
    [...]
    max-width: 1080px;
}

– I used font attribute as experiment yet obviously it doesn’t work in this section of CSS. Where can I change font weight for ONE particular menu item?

The font weight isn’t set on the <li>, it’s set on the anchor tag inside that <li>.

How can I use them to further tweak menu items positions AND color/weight etc? I.e I wanted to move “contact” and “PL” both to the right using above code, and they do sort-of but they swap places (PL goes before Contact).

If you’re getting to the stage where you want them visually separated; one set of items on the left and one set of items on the right, then it would be reasonable to assume that you want this semantically separated too. It might then become a case of using two separate menus.

I like the layout and drop-down menu very much, I just want to move LANGUAGE-SELECTOR outside of drop-down to the right side of red bar. Is it possible?

You mean move “PL”? Display that menu item with a block style and give it a white background so that it appears to be outside of the red bar.

You can use a browser developer tool to see a lot of the answers I’ve given https://developer.chrome.com/devtools/docs/dom-and-styles

`Thank You Andrew!
– Adjusted site max-width and other other elements to fit each other
SOLVED

– So how should syntax look like to set preferences of single menu item?
(like: padding, background, font weight/color/decoration?)
In fact all I need for now is to make PL/EN language selector in light
or normal font-weight instead of bold.
I’m not too familiar with <li> structure…
Or maybe I should exclude one item from this “list” somehow?
Just guessing…

– Creating two separate menus was my first thought but I don’t know how
to put two menus side-by-side on one menu bar, theme customization do
not have such option so it should be entered manually somehow
…help? ??
Meanwhile I used work-around by changing items order in menu settings.
Will do for now. SEMI-SOLVED

– Yes, move “PL” (and maybe “contact” too) but OUT of drop-down menu
completly, so it’ll appear on the right side of horizontal red bar.
Something like this – I’ll try some ASCII art ??
____________________
| MENU V??????????????PL |
———————————-
I understand that “PL” element is currently assigned to this menu.
So it might require creating something like whole different instance
of menu, to be used in “mobile-mode”. I hope it’s more clear now ??

So how should syntax look like to set preferences of single menu item?
(like: padding, background, font weight/color/decoration?)

The syntax of the padding, background, font, etc. styles will be the same, but the ‘selectors’ will be different.
The selectors are currently:

.main-navigation ul li:last-child

Whereas you need to have:

.main-navigation ul li:last-child a

Creating two separate menus was my first thought but I don’t know how
to put two menus side-by-side on one menu bar, theme customization do
not have such option so it should be entered manually somehow
…help? ??

Yeah creating 2 menus is a difficult solution to work with a responsive theme. I think your semi-resolved workaround is fine.

Yes, move “PL” (and maybe “contact” too) but OUT of drop-down menu
completly, so it’ll appear on the right side of horizontal red bar.
Something like this – I’ll try some ASCII art ??

The only way that’s possible with the current HTML is to create another “PL”/ language link below the menu (not in the menu), hide it on desktop and show it on mobile. Then hide the menu “PL”/ language link on mobile.

Thank You again for response, I used this code:

li#menu-item-47-pl a {
color:000;
font-weight:normal;
}
li#menu-item-49-en a {
color:000;
font-weight:normal;
}

Which – if I understand correctly – allows to modify all properties WITHIN menu-item box,
while:

.main-navigation ul li:nth-child(2) {
	float: right;
}

“floats” the box itself.
Am I right?
Anyway works now so SOLVED Too.

***

About Mobile problem – that’s something I intuitively wanted to do,
but how do I “hide” or “show” something in particular mode?
How can I find this code section?

“floats” the box itself.

Yes, the last element in the list of selectors is the thing that is being styled.
When it’s this list of selectors, the anchor (<a>) is being styled:

li#menu-item-47-pl a

When it’s this list of selectors, the list item (<li>) is being styled:

.main-navigation ul li:nth-child(2)

but how do I “hide” or “show” something in particular mode?

There’s a CSS technique called ‘Media Queries’ that allows you to set styles for particular screen sizes.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

For example:

/* Hide menu "PL" link on mobile */
@media screen and (max-width: 480px) {

    li#menu-item-47-pl {
        display: none;
    }

}

How can I find this code section?

I have a feeling that means you have been modifying the theme directly? If that’s true I recommend instead creating a Child Theme to hold your modifications: https://codex.www.ads-software.com/Child_Themes

Yeah, I learned about making “child themes” too late, my original “20-13” is heavily trimmed now, and I worry something will be messed up when theme actualisation show up.
Can I move all that I have done so far to “child-theme” directory and continue from there?

Template files can just be copied over into the child theme folder.

Your stylesheet can also be copied into the child theme folder, just make sure the parent theme stylesheet isn’t enqueued any more. So when the Codex says do this:

function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Instead do this:

function theme_enqueue_styles() {

    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

And the Child Theme stylesheet will need to have a different set of comments at the top of the file. Basically it only needs this:

/*
 Theme Name:   Twenty Thirteen Child
 Template:     twentythirteen
*/

Thank You again, It’s late for me – I will try doing it tomorrow to avoid disaster ??

Can’t make it work :/
No matter what code I put into functions.php
(Yours or codex) and no matter in what order/combination I put it,
I end up either with error:
“Fatal error: Cannot redeclare twentythirteen_setup() (previously declared in /home/virt1517/domains/3k6hobby.com/public_html/wp-content/themes/twentythirteen-child/functions.php:69) in /home/virt1517/domains/3k6hobby.com/public_html/wp-content/themes/twentythirteen/functions.php on line 108”
OR with incomplete template – i.e. no top logo, no bottom widgets etc.

When I reapply original theme (the one modified by me that is) all goes back to normal but I’m worried about theme update…

I guess you copied the theme’s functions.php file into your Child Theme folder?

Well, I guess I did ?? Shouldn’t I?

No ?? Only Template files can be copied into the Child Theme folder. I made an exception for the style.css file and recommended that you change the comments at the top of the file instead, for this situation.

The functions.php file should be created from scratch https://codex.www.ads-software.com/Child_Themes#Using_functions.php