Mobile Navigation button size

Hi Kharis,
I got a little problem but unable to solve it as u can see in screen shot i created a button look in navigation menu it looks fine on desktop but on mobile its totally out the background color is also not taking any effect while i try to change it . i want to keep it simple on mobile or totally hide it plz help.

regards
Fatima

Hello Farima,

Thank you for getting back. Are you referring to the orange button that reads “Book a Designer”? Please share a link to your site to help me inspect and get the exact selector.

Regards,
Kharis

Hi Kharis,
here is the website link
https://www.kitchentek.com.au/

the button (link) i am referring to is with no." 1300747666" “I JUST CHANGE IT FROM GET FREE QUOTE” with orange COLOR in navigation menu . it looks on desktop site but on mobile site the number vanished and only white button display! i highlight it with blue. on mobile version i need to remove that shape and show only a phone icon LIKE THIS

make it bit small and text visible so it looks better.

so the item is not aligned with other menu items i tried hard to find the way but no luck
your help really appreciated.
regrads
Fatima

Hello Fatima,

Thank you for adding some extra details. If got it right, you’d add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    #menu-item-1201 > a {
      border-radius: 0 !important;
    }

Regards,
Kharis

Hi Kharis,
thanks for your reply
1- but i actually want to achieve this on mobile version i circled in red if u could help me with that

2- on desktop version the link with text “1300747666” is not perfectly aligned how can i align them perfectly ?

your support and help really appreciated that sticks us to this theme.

Regards

Fatima

1- but i actually want to achieve this on mobile version i circled in red if u could help me with that

Try doing the below steps. 1. Install and activate the TC Custom JavaScript plugin
2. Go To Appearance > Custom JavaScript
3. Paste the following code into the provided box

    jQuery(function($) {

      var phone = '+61418433687';
      $('.site-header .col-md-8').prepend('<div class="phone-top-wrap"><a href="tel:'+phone+'"><i class="fa fa-phone"></i></a></div>');

    });
  1. Update
  2. Add this extra CSS code to Appearance > Customize > Additional CSS from dashboard.
    @media only screen and (min-width: 1025px) {
      .phone-top-wrap {
        display: none;
      }
    }


    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .phone-top-wrap {
        float: right;
        position: relative;
      }

      .phone-top-wrap a {
        position: absolute;
        top: 5px;
        right: 40px;
      }
    }

    @media only screen and (max-width: 767px) {
      .phone-top-wrap {
        display: inline;
      }
    }

    .phone-top-wrap a {
      font-size: 28px;
      color: #fff;
    }

Regards,
Kharis

Thanks Kharis for help and support

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis