Tagged: 

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • January 28, 2016 at 8:17 pm #574038
    mmcc

    Hi,
    I am trying to have the secondary nav showing on top only when on mobile with phone number (sticky) so it always stays on top and have the main nav (the one below the logo) disappear when the mobile is active.
    ( I removed the menu toggle since there is not need because of the sticky top bar with the secondary nav.)

    As you can see the spacing/margin between the secondary nav tabs is too much/wide and line height too big.
    The Logo gets hidden under the top bar since it increased the size on mobile.
    I tried to figure this out, but I could not find it in the forum.

    Social icon (facebook) overlaps the main logo on mobile.

    How can I fix this?

    Thanks
    Monica

    January 29, 2016 at 2:49 am #574250
    Elliott

    Hi mmcc!

    Add this to your custom CSS.

    @media screen and (max-width: 767px) {
#header_main { display: none !important; }
}

    Best regards,
    Elliott

    January 29, 2016 at 2:55 am #574253
    mmcc

    I am not sure what you are answering since that part was already done as you can see on the site.
    I was asking how not to make the logo hidden under the top bar and to fix the social icon overlapping

    January 29, 2016 at 2:44 pm #574561
    mmcc

    Elliott, I was asking
    -“the spacing/margin between the secondary nav TABS (on the top bar on mobile view) is too much and line height too big.
    -The Logo gets hidden under the top bar since it increased in the size on mobile.
    -Social icon (facebook) overlaps the main logo on mobile.
    Any way to resolve this?

    Thanks
    Monica

    January 29, 2016 at 4:53 pm #574660
    Yigit

    Hi!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 768px) {
#header_main {
    padding-top: 60px;
}}
@media only screen and (max-width: 634px) {
#header_main {
    padding-top: 100px;
}}
@media only screen and (max-width: 480px) {
.responsive.html_header_top #header_main .social_bookmarks {
    display: block;
}}

    Best regards,
    Yigit

    January 29, 2016 at 6:10 pm #574733
    mmcc

    Yigit,
    thank you so much it work great, but the Facebook Icons still overlaps the main logo in mobile.

    Haw can I fix that

    February 1, 2016 at 6:06 am #575558
    Rikard

    Hi,

    Please try the following as well:

    @media only screen and (max-width: 767px) {
.responsive.html_header_top #header_main .social_bookmark {
right:0px !important;
}
}

    Best regards,
    Rikard

    February 2, 2016 at 12:28 pm #576387
    mmcc

    Rikard,
    thanks but it still overlaps the main logo when in mobile view. no difference

    February 2, 2016 at 5:22 pm #576565
    Yigit

    Hey!

    Do you mind creating a temporary admin login and posting it here privately?

    Cheers!
    Yigit

    February 2, 2016 at 5:54 pm #576596
    mmcc

    Yigit,
    thank you for the quick response. At this point I would rather complety remove from the MOBILE version the social media from the top so the logo aligns in the middle instead of being pushed to the left. What do I have to do in order to obtain that result?

    Thanks
    Monica

    February 2, 2016 at 5:57 pm #576598
    Yigit

    Hey!

    Please add following code to Quick CSS

    @media only screen and (max-width: 767px) {
#header .social_bookmark {
display: none !important;
}
}

    Regards,
    Yigit

    February 2, 2016 at 6:05 pm #576603
    mmcc

    still there, showing

    February 2, 2016 at 6:07 pm #576605
    mmcc

    logo if that is removed needs to be centered and not to the left

    February 3, 2016 at 8:16 am #576944
    Rikard

    Hi,

    I can only see a coming soon page so we will need admin login details, please post them in the Private Content section of your reply.

    Best regards,
    Rikard

    February 3, 2016 at 6:11 pm #577221
    mmcc

    Sorry I just made the site live and moved it to the right domain name.
    also the Facebook icon is not showing in Chrome.
    I tried myself to center the logo on ipad and mobile. looks that works, but not sure that I did it correctly.

    February 3, 2016 at 6:15 pm #577227
    mmcc

    I figure out why the icons in fontello ( social media etc) are not showing. I blocked access in wp content to all the images with the htaccess and now the fonts ( of course) are not loading. so I have to actually made those not icon fonts, but images.

    February 5, 2016 at 6:10 am #578271
    Ismael

    Hey!

    This code should fix the logo and top bar issue on mobile:

    @media only screen and (max-width: 480px) {
#header_main {
    padding-top: 120px;
    left: 8%;
}
}

    There’s a better way to center align the logo but since you’re using css left property, we’ll use that again. Please add the code at the very bottom of the Quick CSS field.

    I’m sorry but I’m not sure if I understand the social icon issue. Or did you figure it out?

    Best regards,
    Ismael

    April 28, 2016 at 11:46 pm #624050
    studioem

    Is there some quick CSS that will remove the secondary menu bar completely on all devices?

    April 29, 2016 at 8:34 am #624149
    Basilis

    Hi,


    @studioem     please open a new ticket, with your web site so we can give it a look for you.
    Thanks a lot for your time and patience

    Best regards,
    Basilis

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