Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • February 3, 2016 at 2:29 pm #577111
    Jasmer

    Hi guys,

    On one of my sites I’d like to see the social icons in the mobile header with dark grey icons. Have some CSS for that? See below..

    Thank you,

    Jas

    February 3, 2016 at 6:28 pm #577241
    Yigit

    Hi Jasmer!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 767px) {
.responsive #header .main_menu .social_bookmarks {
    display: block;
    float: right;
}
.responsive #header .main_menu .social_bookmarks a { color: #555555 !important; }}

    Best regards,
    Yigit

    February 3, 2016 at 10:12 pm #577370
    Jasmer

    Thank you! Can we do the same thing for the site below? I need to force the icons to show and to be in the correct place. The header is different on this one so we might not need the icon placement float:left??

    Jas

    February 8, 2016 at 7:33 am #579400
    Ismael

    Hey!

    Please add this:

    @media only screen and (max-width: 767px) {
.responsive .main_menu .avia-menu, .responsive #header_main .social_bookmarks, .responsive #header_main_alternate {
    display: block;
}

#avia-menu {
    display: none;
}

.responsive #header_main .social_bookmarks {
    position: absolute;
}

.responsive #header_main .social_bookmarks a {
    color: #555555 !important;
}
}

    Cheers!
    Ismael

    February 8, 2016 at 9:04 am #579443
    Jasmer

    I just had to add !important, !important, !important. Then it worked.

    Last question: The phone number is the top of the header is too light. Can we make it color: #555555 as well?

    Thank you Ismael

    February 9, 2016 at 4:46 am #580081
    Vinay

    Hey!

    Sorry cannot see the phone number in the header please send us a mockup or point us to the URL where we can see the phone number you like to change so we can help you with the css.

    Best regards,
    Vinay Kashyap

    February 9, 2016 at 5:16 am #580106
    Jasmer

    1. Hi I was referring to the site in this comment above. :)

    https://kriesi.at/support/topic/mobile-menu-social-icons/#post-577370

    February 9, 2016 at 11:53 am #580309
    Vinay

    Hey!

    ok! Please add the below code in Quick CSS

    #top .av_header_transparency .phone-info {
    color: #555!important;
}

    Best regards,
    Vinay Kashyap

    February 9, 2016 at 12:09 pm #580319
    Jasmer

    Hi Vinnie,

    It worked 50% :) It made the sentence before the phone number appear “For Appointment Please Call”. However, the phone number is still barley visible. CSS?

    Thank you,

    Jas

    February 9, 2016 at 1:19 pm #580379
    Vinay

    Hey!

    Please refresh the cache a few times i see both number and text in #555

    Best regards,
    Vinay Kashyap

    February 9, 2016 at 1:52 pm #580393
    Jasmer

    Thank Vinay but Ugh. The title of this topic is “Mobile Menu…” All posts on this topic are mobile related.

    Let’s start over.

    1. I removed the CSS you gave me above because it was making the desktop site appear dark.

    2. I’d like CSS for the mobile site ONLY.

    3. I’d like the desktop site to stay exactly as it is. It’s perfect.

    Thank you,

    Jasmer

    February 10, 2016 at 7:28 am #580855
    Vinay

    Hey!

    Here you go buddy. The below css is for the mobile site.

    
@media only screen and (max-width: 768px) {
	#top .av_header_transparency .phone-info {
	    color: #555!important;
	}
}

    Regards,
    Vinay Kashyap

    • This reply was modified 8 years, 10 months ago by Vinay.
    February 10, 2016 at 7:32 am #580861
    Jasmer

    Thanks. The CSS is in place. As you can see this only affects “For Appointment Call” The phone number is still light grey. Ideas?

    Thanks,

    Jas

    February 10, 2016 at 11:50 am #581015
    Vinay

    Hey!

    The whole line which you are mentioning is in a span tag so any style you apply to the phone info applies to the whole line.

    It looks good on my end and to be sure just right click the phone info and inspect the element on the right side it will show you what color the phone info is :)

    Regards,
    Vinay Kashyap

    February 11, 2016 at 8:10 am #581478
    Jasmer

    Yes on Android it looks good.

    On iPhone it has a problem. Why? This may have something to do with visited or hover color?

    See below…

    Thank you

    February 14, 2016 at 7:45 am #582858
    Ismael

    Hi!

    The font color looks consistent when I checked it. The font color is only applied to the parent container (.phone-info) so it’s probably a styling applied by the browser to numbers. Try this:

    @media only screen and (max-width: 768px) {
#top .av_header_transparency .phone-info, #top .av_header_transparency .phone-info span {
    color: #555!important;
}
}

    Best regards,
    Ismael

    February 14, 2016 at 7:59 am #582865
    Jasmer

    Doesn’t work ;( I left your CSS there though. Do you want to log in and check it out?

    Also, I have 2 other unanswered topics. I think it’s been a couple of days. If you have a moment, would you check those out please?

    Thanks,

    Jas

    • This reply was modified 8 years, 10 months ago by Jasmer.
    February 18, 2016 at 1:04 pm #585370
    Andy

    Hey!

    I checked your source code and Ismael’s code is applied fine. Also in frontend I can see the result fine:

    View post on imgur.com

    Please clear browser cache and hard refresh a few times.

    Cheers!
    Andy

    February 18, 2016 at 1:50 pm #585394
    Jasmer

    Hi Andy,

    We are not talking about that anymore. It’s the phone number that is light on iPhone but not Android. You can see the screenshots here..

    Mobile Menu Social Icons

    February 18, 2016 at 2:56 pm #585418
    Andy

    Hey!

    please stick to thread’s title only in the future and feel free to open a new ticket for a different question.

    I checked on mobile and phone number seems to be fine to me. I can’t see any difference between iPhone (chrome emulator) and Android (htc one s).

    Cheers!
    Andy

    February 25, 2016 at 7:35 pm #589399
    Yigit

    Hey!

    I have added following code to Functions.php file in Appearance > Editor

    function avia_turn_off_detection(){
echo '<meta name="format-detection" content="telephone=no">';
}
add_action('wp_head', 'avia_turn_off_detection');

    Please review your website now

    Cheers!
    Yigit

    February 26, 2016 at 10:33 am #589638
    Jasmer

    Thanks Yigit!

    Yes that fixed it but I lost the click-ability of the phone number. Can we get that back so people can click to dial?
    I’m sure when we removed the link to dial that solved the issue because it made all text the same.

    Here is the mobile device CSS that is currently active on the site.
    It is near the top of Quick CSS

    @media only screen and (max-width: 768px) {
#top .av_header_transparency .phone-info, #top .av_header_transparency .phone-info span {
    color: #555555!important;
}} /*phone info*/

    Also I found this CSS for the desktop site. Could it be conflicting?
    Desktop site looks perfect.
    This is just below the code above.

    .header-scrolled .phone-info span {
color: #8f8c8f;
}

    Thank you

    February 26, 2016 at 11:55 am #589683
    Yigit

    Hi!

    That is expected. You should add your “click to call” button as described here – https://kriesi.at/support/topic/phone-number-click-to-call/#post-452509

    Cheers!
    Yigit

    February 26, 2016 at 12:24 pm #589698
    Jasmer

    Hi Yigit,

    I added that and it turns light again but this time on all mobile devices.

    Before we edited the functions.php it was only light on iPhone now it is light on both iPhone and Android. So the problem has worsened. Must be some conflict somewhere.

    Hmm. Any ideas Yigit?

    Thank you

    February 26, 2016 at 1:32 pm #589742
    Yigit

    Hi!

    That is because it is linked now and now you can change its color using following 

    @media only screen and (max-width: 480px) {
.phone-info a {
    color: #555555 !important;
}}

    Cheers!
    Yigit

    February 26, 2016 at 1:56 pm #589773
    Jasmer

    Done! Thank you!

    Close topic..

    Jas

  • Author
    Posts
Viewing 26 posts - 1 through 26 (of 26 total)
  • The topic ‘Mobile Menu Social Icons’ is closed to new replies.