Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 17, 2023 at 3:52 pm #1422815
    frb1

    Hi Kriesi,

    Social bookmarks are important for us – also on mobile. I wish to show my social bookmarks “on top” of the flyout menu on mobile. How do i make sure they there?

    Right now they show below the mobile flyout window, when I adjust the size of my browserwindow on a desktop computer, but they’re not there when I preview on my phone? I’ve added some custom CSS that might (but should not) interfear.

    NOTE: I need it to work both on transparant and normal header. Hope you can help

    BR Frederik

    October 18, 2023 at 8:11 am #1422859
    Ismael

    Hey frb1,

    Thank you for the inquiry.

    The social icons are hidden on smaller screens by default but you can display them back by adding this css code. You might have to adjust the position of the icons a bit. 

    @media only screen and (max-width: 479px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all #header .social_bookmarks,
  .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block;
  }
}

    Best regards,
    Ismael

    October 18, 2023 at 11:21 am #1422888
    frb1

    Hi Ismael,

    Thank you, that works! I tried to add some code to adjust size and position to social bookmarks, but it does not work:

    @media only screen and (max-width: 479px) {
    /* Add your Mobile Styles here */
    .responsive #top #wrap_all #header .social_bookmarks,
    .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block;
    left: 30px !important;
    font-size: 20px !important;
    }
    }

    Also, I would like to adjust position of the burger icon. Also without luck. Could you point to info or specify for me where i need to put adjustment code? Heres relevant code:

    /* Activate burger menu */
    @media only screen and (max-width: 1100px) {
    #top #header .av-main-nav > li.menu-item {
    display: none !important;
    }

    #top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
    }}

    /* Burger menu thickness*/
    .av-hamburger-inner,
    .av-hamburger-inner:before,
    .av-hamburger-inner:after {
    height: 1px;
    }

    /* Burger menu icon color on transparent header */
    @media only screen and (max-width: 479px) {
    #header.av_header_transparency .av-burger-menu-main a .av-hamburger-inner,
    #header.av_header_transparency .av-burger-menu-main a .av-hamburger-inner:before,
    #header.av_header_transparency .av-burger-menu-main a .av-hamburger-inner:after {
    background-color: #232323 !important;
    }}

    @media only screen and (min-width: 1100px) {
    #top nav .social_bookmarks {
    margin-right: 120px;
    float: right;
    left: 1px;
    }}

    @media only screen and (max-width: 479px) {
    /* Add your Mobile Styles here */
    .responsive #top #wrap_all #header .social_bookmarks,
    .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block;
    left: 30px !important;
    font-size: 20px !important;
    }
    }

    October 19, 2023 at 4:58 am #1422957
    Ismael

    Hi,

    Thank you for the update.

    The position adjustment seems to be working as expected. If you want to adjust the vertical position of the social icons, try to set the “top” property.

    .responsive #top #wrap_all #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block;
    font-size: 20px !important;
    left: 30px !important;
    top: 40px;
}

    Best regards,
    Ismael

    October 19, 2023 at 10:51 am #1422984
    Guenni007

    with flyout mobile menu – you are talking about the hamburger menu?
    And your social bookmarks are there on default?

    October 20, 2023 at 11:00 am #1423103
    frb1

    Hi Ismael,

    Thank you Ismael. I managed to make it work with Social Bookmarks visible on mobile below the flyout/mobile menu.

    I had to remove the comment (/* Add your Mobile Styles here */) to make it work though. Strange since it should not read that, but it made the difference.

    Note: If you can refer to code that put/places the Social Bookmarks within the flyout/mobile menu, I might consider using that instead.

    Consider this case closed, and thank you again :)

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Social bookmarks on flyout mobile menu’ is closed to new replies.