[Resolved] WPML – incorrect position of the logo

[biblioteka]

Hi,
I just istalled wpml plugin. My default language is polish and second english. When I change language to english, site logo change position. Can you give me any advice how to lock logo in both language?.
And this is code in css:
.site-branding {
display: inline-block;
position: relative;
left: 160px;
}
.site-logo {
display: inline-block;
position: relative;
margin-left:-440px;
top: -20px;
}

.header-widget {
position:relative;
top:-20px
}

Thanks

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

replace that CSS for this:

.inside-header {
    display: flex;
    align-items: center;
}
.site-logo {
    order: -2;
    margin-right: 1em;
}
.site-branding {
    order: -1;
    margin-right: auto;
}

You can then reduce the top padding in the header.
After that we need to decide on what you want the mobile header to look like.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[biblioteka]

Hi,
It’s looks good. And if we talking about mobile header :),
1) when I in options mobile logo on, logo didisappears in mobile view and menu go on right side not center.
2) i would like also in mobile footer center all widgets,
3) how on dekstop view change distances in top bar between widgets?.

.inside-top-bar {
display: flex;
flex-direction: row;
align-items: baseline;
margin-left: 88em;
height: 40px;
}

.inside-top-bar .zeno_font_resizer{
order: 1;
top: 40px;
}

.inside-top-bar .search-field{
order: 2;
height: 30px;
width: 200px;
top: 5px;
}
.inside-top-bar .wpml-ls-item-legacy-list-horizontal{
order: 3;
top: 0px;
}

@media (max-width: 768px) {

.site-header + *{
margin-top: 200px;
}
.inside-top-bar {
display: flex;
flex-direction: row;
margin-left: 0em;
justify-content: center;
align-items: center;
height: 50px;
}

.inside-top-bar .zeno_font_resizer{
display: none;
}
.inside-top-bar .search-field{
order: 1;
height: 20px;
width: 220px;
top: 5px;
}
.inside-top-bar .wpml-ls-item-legacy-list-horizontal{
order: 3;
top: 0px;
}

}

.inside-header {
display: flex;
align-items: center;
}
.site-logo {
order: -2;
margin-right: 1em;
}
.site-branding {
order: -1;
margin-right: auto;
}

[David]

So you want to keep the just the logo above the centered navigation for mobile?
If so disable the Mobile Header, and i will provide some CSS to make that so.

For the top bar and footer widgets on mobile try this:

@media (max-width: 768px) {
    .top-bar-align-right .inside-top-bar>.widget:nth-child(even) {
        margin-right: auto;
    }

    .footer-widgets div {
        text-align: center !important;
    }

    .inside-header>:not(:last-child):not(.main-navigation) {
        margin-bottom: 0 !important;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[biblioteka]

Yep!, that’s it. I think the last problem, how to correct left logo “BU” vertical position in mobile header?.

[David]

I have edited the CSS above to remove the bottom margin from the site branding and widget.
You can set the font size for the Site Title and Tag Line for Mobile in Customizer > Typography > Header. Making that smaller will help with the layout.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[biblioteka]

How to change the font size in the mobile header in css. How to add .site-branding
{font-size: 10px}, the font does not change. The second thing is how block the position of widgets in the top-bar, because as I shrink the page through “ctrl – -“, widgets move to the left.

[David]

In Customizer > Typography > Header you can change the Mobile font size for the Site Title.

For the Site Tag line you would need to add this CSS:

@media (max-width: 768px) {
    .site-description {
        font-size: 10px !important;
    }
}

For the Header Widget you have this CSS:

.inside-top-bar {
    display: flex;
    align-items: baseline;
    margin-left: 92em;
    height: 40px;
}

remove the margin-left: 92em; and replace it with justify-content: flex-end;

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[biblioteka]

Great!,
now it looks good. Could you recommend a plugin that can change the size of the iframe with the size of the page?. On the main page, I have an iframe search engine and the mobile iframe brakes down.

[David]

If an embed is not natively responsive, and i am not adding lots of them, then i use this Site to create a responsive embed:

http://embedresponsively.com

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[biblioteka]

It’s very helpful thanks. One more question. On three subpages, I have my own side menu on the right:
http://lib.amu.edu.pl/rocznik-biblioteka/
I implements them using the html widget, but when I turn on wpml these widgets disappear. In wpml strings, these widgets are translated as. Maybe you have some suggestions where to look for a solution?
http://lib-prod.amu.edu.pl/rocznik-biblioteka (page with wpml turn on)
Or should I rather give an inquiry to the creators of wpml?

[David]

In your Primary Navigation, how is that translated, do you have a second menu for that? If so does the same apply to the secondary nav? As currently its just outputing an empty navigation

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[biblioteka]

Hi,
I have plugin Advanced Menu and in this plugins I hide submenu on selected pages. In this selected pages a have 3 custom html widget. One of them title : menu_prawy_bok_rocznik:

<table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tbody><tr align=”left”><td><span class=”mainlevel-nav2″>
<b>”BIBLIOTEKA”<br>
ISSN 1506-3615</b></span></td></tr>
<tr align=”left”><td>Informacja o Roczniku “Biblioteka”</td></tr>
<tr align=”left”><td>Zespół redakcyjny</td></tr>
<tr align=”left”><td>Zasady dla autorów</td></tr>
<tr align=”left”><td>Recenzenci</td></tr>
<tr align=”left”><td>Zasady recenzowania</td></tr>
<tr align=”left”><td>Rocznik “Biblioteka”</td></tr>
<tr align=”left”><td>E-księgarnia</td></tr>
<tr align=”left”><td>Kontakt</td></tr>
</tbody></table>

When I add submenu in english menu BU-ENG About-library -> Rocznik “Biblioteka” I get menu from widget
Advanced-Menu not from HTML Widget.

I translated Advanced-Menu and Custom HTML menu_prawy_bok_rocznik widgets.

May will be easier to check this when You login in my test-host.?

[David]

Its really out of our scope. Maybe best to speak with WPML. Let us know what feedback they provide.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[biblioteka]

I want to thank you for such invaluable help. You are great, and I will let you know what WPML’s help will tell me about this problem.

Best regards,
Paweł

[Author]

Posts