Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • January 27, 2018 at 1:07 pm #903656
    denisj77

    I set the positions of my logo as desired in the main menu with this code:
    .logo {
    margin-top: -30px;
    margin-left: -10px;
    }

    But now when I scroll down and the Small Bar appears the logo is not positioned correctly, how can I solve it?
    Thanks

    January 28, 2018 at 12:34 pm #903864
    denisj77

    Resolved with this CSS:
    .header-scrolled .logo { margin-top: 0; }
    Thanks

    January 29, 2018 at 10:13 pm #904476
    Basilis

    Hi,

    Thank you for using Enfold :)
    If you need something else please feel free to create a new ticket.

    Thank you very much

    Best regards,
    Basilis

    January 30, 2018 at 12:22 am #904538
    denisj77

    No Sorry, The css code works for desktop pc but not for mobile or Smarthpone… I need Help…
    Thanks

    January 30, 2018 at 3:09 am #904580
    Mike

    Hi,
    When you say that it is not working for mobile, is that because the header is not sticky for header on mobile?
    When I view I see it working, yet as you scroll down it hides because the header is not sticky.

    Best regards,
    Mike

    January 30, 2018 at 9:21 am #904673
    denisj77

    Yes, is not sticky…
    How Can I resolve?
    Thanks

    January 30, 2018 at 10:48 pm #905212
    Basilis

    Hi,

    Please take a look here
    https://kriesi.at/support/topic/sticky-mobile-menu/

    And let us know if that works out for you.

    Thank you

    Best regards,
    Basilis

    January 31, 2018 at 12:20 am #905252
    denisj77

    After my main Menu I Have inserted The second menu (top bar) , then I Want to See my Logo centered in height between the two menus, main menu and second menu…
    Then I set the positions of my logo as desired in the main menu with this code:
    .logo {
    margin-top: -30px;
    margin-left: -10px;
    }

    But now when I scroll down and the Small Bar appears the logo is positioned Right in a Desktop Pc, but is not positioned correctly If I try with a Tablet ( i Have -30px ), how can I center my Logo in This Case?
    In Smartphone I don’t Want The Small bar After Scroll down, And now thats is Right.
    Sorry for my English
    Thanks

    • This reply was modified 6 years, 9 months ago by denisj77.
    February 1, 2018 at 8:18 am #906022
    Ismael

    Hi,

    Adjust the top margin value on tablet screens by using css media queries.

    @media only screen and (max-width: 1024px) {
  /* Add your Mobile Styles here */
  .logo {
     margin-top: -10px;
     margin-left: -10px;
   }
}

    Best regards,
    Ismael

    February 1, 2018 at 1:57 pm #906280
    denisj77

    Don’t Change Nothing…
    But I must to Insert something here? /* Add your Mobile Styles here */
    Thanks
    Here my Complete CSS code:

    @media only screen and (max-width: 767px) {
    .responsive .logo img { max-height: 40%; top: 0px; }}

    @media only screen and (max-width: 1024px) {
    /* Add your Mobile Styles here */
    .logo {
    margin-top: -10px;
    margin-left: -10px;
    }
    }

    .weather {
    position: relative;
    float: right;
    top: -10px;
    right: 110px;
    }

    #top .sub_menu>ul {
    float: left;
    margin: 0;
    right: -40px;
    position: relative;
    }

    @media only screen and (max-width: 767px) {
    .weather {
    top: -30px;
    }
    .responsive #header_meta .sub_menu ul{
    text-align:right!important;
    color:#000!important;
    }
    }

    .header_color .weather { color: black; }

    #top .av_header_transparency #header_meta {
    border-bottom: none! important;
    }

    .logo {
    margin-top: -20px;
    margin-left: -10px;
    }

    .header-scrolled .logo { margin-top: 0; }

    .inner_sidebar {
    margin-left: 30px;
    }

    .main_color table,
    #top .main_color .avia-data-table.avia_pricing_minimal th {
    background: transparent;
    }

    #top.page-template-default.page.stretched #main .container:before {
    content: ‘ ‘;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.2;
    background-image: url(https://residenzeparadiso.com/wp-content/uploads/2017/12/chaplet-2489637_1920.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    }

    #top.page-template-default.page.stretched #socket .container:before {
    background-image: url(https://residenzeparadiso.com/wp-content/uploads/2018/01/whitebackground.png) !important;
    background-repeat: repeat;
    }

    #top.page-id-61 .inner_sidebar {
    font-style: normal!important;
    }

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container {
    width: 100%!important;
    max-width: 100%!important;
    padding-left: 25px!important;
    padding-right: 25px!important;
    }}

    February 2, 2018 at 6:35 am #906646
    Ismael

    Hi,

    Thank you for the info. Please provide the login details in the private field so that we can test the css modifications.

    Best regards,
    Ismael

    February 2, 2018 at 7:49 pm #906981
    denisj77

    Here my Login Details…
    Can you also check the rest of my css code if it’s correct?
    Thanks

    February 5, 2018 at 4:06 am #907653
    Ismael

    Hi,

    We adjusted the css modification a bit.

    .html_header_transparency .logo {
    margin-top: 0;
    margin-left: 0;
}

    Best regards,
    Ismael

    February 5, 2018 at 12:42 pm #907904
    denisj77

    Sorry , but if you reset my logo Position, it’s normal that it works afterwards…
    I Want Set the Logo in This Position on my Pages with this Value: https://ibb.co/i2qoGH
    .logo {
    margin-top: -25px;
    margin-left: -10px;
    }

    And, if Possible, I want to See te Logo in Center when I Scroll Down in the Top Bar:
    Here a Screenshot of Issue: https://ibb.co/hZTfVc
    Thanks

    • This reply was modified 6 years, 9 months ago by denisj77.
    February 7, 2018 at 12:34 pm #909070
    Ismael

    Hi,

    Please try this css code.

    .av_header_transparency .logo {
    margin-top: -30px;
}

    Or post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

    Best regards,
    Ismael

    February 7, 2018 at 2:49 pm #909194
    denisj77

    Ok, This Code Works Good.
    Can I have a css code with the same function for mobile devices and smartphones?
    Thanks

    • This reply was modified 6 years, 9 months ago by denisj77.
    February 8, 2018 at 1:59 am #909499
    Ismael

    Hi,

    I’m sorry but that’s not possible due to the previous modifications added. Please continue on your other thread.

    // https://kriesi.at/support/topic/hide-top-bar-when-scroll-only-in-smartphone/

    Best regards,
    Ismael

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Logo on Main Menu’ is closed to new replies.