Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 28, 2016 at 10:57 am #717660
    MKP74

    Hi!

    Unfortunately my customer changed her mind. She doesn’t want anymore the language flag in the menu (mobile version) but on the menu button left side.

    So I had this
    `add_action( ‘ava_after_main_menu’, ‘enfold_customization_header_widget_area’ );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( ‘header’ );
    }`
    in the function.php file and that

    #header .widget {
  right:50px;
  padding-top: 25px;
  position: absolute;
  top: 0;
  transform: translate(-50%);
  z-index: 999;

    in the Quick CSS

    And if I had that

    @media only screen and (min-width: 768px) {
#header .widget {
  display:none !important;
}

    All the widgets disappear…

    So now my problem is that I have 2 widgets in the left sidebar (text with phone number and Facebook) and this CSS makes move those widgets. I don’t manage to apply this CSS code only on the header widget (flag button).

    To recap : I just want the flag button on the menu button left side. And I want it visible only on smartphones.

    Hope it’s understandable.

    Thank you in advance for your help.

    • This topic was modified 7 years, 12 months ago by MKP74.
    November 28, 2016 at 2:23 pm #717758
    Nikko

    Hey MKP74,

    Please replace #header .widget with #header #text-7 since #header .widget will affect all widgets in the header (sidebar in this case). So this code:

    #header .widget {
  display:none !important;
}

    should be changed to this one:

    #header #text-7 {
  display:none !important;
}

    And this code:

    #header .widget {
  right:50px;
  padding-top: 25px;
  position: absolute;
  top: 0;
  transform: translate(-50%);
  z-index: 999;
}

    Should be changed to:

    #header #text-7 {
  right:50px;
  padding-top: 25px;
  position: absolute;
  top: 0;
  transform: translate(-50%);
  z-index: 999;
}

    To put the flag on the left, just change right:50px; to left:0;, however it will overlap with the logo, I think putting the logo in the center or adjusting it’s left margin would do it. Here is how to center the logo in mobile:

    @media only screen and (max-width:767px) {
  .responsive .logo img {
    margin: 0 auto;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    November 28, 2016 at 5:29 pm #717903
    MKP74

    All perfect! Thank you very much Nikko! Very good job :-)

    November 29, 2016 at 10:49 am #718157
    Nikko

    Hey!

    Glad we could help :)

    Best regards,
    Nikko

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