[Resolved] WPML – incorrect position of the logo

Home Forums Support WPML – incorrect position of the logo

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #871324
    Zaneta

    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
    #871660
    David
    Staff
    Customer Support

    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.

    #872369
    Zaneta

    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;
    }

    #872373
    David
    Staff
    Customer Support

    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;
        }
    }
    
    #872431
    Zaneta

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

    #872471
    David
    Staff
    Customer Support

    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.

    #876189
    Zaneta

    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.

    #876218
    David
    Staff
    Customer Support

    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;

    #876298
    Zaneta

    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.

    #876300
    David
    Staff
    Customer Support

    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

    #876373
    Zaneta

    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?

    #876403
    David
    Staff
    Customer Support

    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

    #880164
    Zaneta

    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.?

    #880193
    David
    Staff
    Customer Support

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

    #880200
    Zaneta

    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ł

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.