Docs

[Smarticle]

I have 2 mobile nav issues to iron out.

The site:
gkstrategy.com

Issue 1:
I want my call button back! Heh

The orange call button disappears when the desktop nav switches to the mobile version. I had it working before, but a lot has happened since then—especially in configuring the transparent nav on the homepage to play ball with the Revolution Slider that’s there—so I guess the code has either broken, been deleted or is being overridden.

Could you help me get it back please.

Issue 2:
The mobile nav needs to be dark… on the homepage.

Due to the aforementioned requirement for a transparent nav on the homepage (in desktop view), the mobile drop down aspect of the nav is also transparent… but that’s turned out to be a problem. OK, X’s native setting means that there is a semi-transparent rectangle around each menu item, but it’s still not dark enough. It needs a solid background. So…

Can you help me make the mobile nav on the homepage appear just like it does on the other pages, please?

Obviously we mustn’t lose the formatting for the desktop version of the nav (on the homepage). The current homepage appearance in desktop mode is exactly how I need it to look. So it’s just a case of sorting it in mobile view.

Cheers guys. Look forward to hearing from you.

[Rue Nel]

Hello There,

Thanks for writing in!

1] To resolve this issue and make sure that the call orange button will display in mobile devices, please find and remove this code from your customizer;

/*
//REMOVES THE SURPLUS CALL BUTTON FROM MOBILE MENU
*/
.mobile li.call-button:last-child {
display: none;
}

2] To make your mobile navbar a little bit darker on the homepage, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 979px){
  .home #top .x-navbar,
  .home #top .x-navbar.nb-trans {
    background-color: rgba(33,33,33,0.85) !important;
  }
}

We would loved to know if this has work for you. Thank you.

[Smarticle]

Perfect. Thanks, Rue.

It did, however, highlight one issue that’s making me slightly rethink my design…

Is it possible to:

Ideally, a) Make the orange call button appear in the Topbar, but only on mobile? Obviously it would need to replace the other info that currently appears, which is…

GK Strategy | gkstrategy.com
Twitter LinkedIn

b) Make a clickable link (i.e. “Click to call” OR “Call 020 7340 1150” tel:+442073401150) appear in the Topbar—only on mobile—but in addition to the other info that currently appears. So it’d look something like this…

GK Strategy | gkstrategy.com
Call 020 7340 1150
Twitter LinkedIn

Really appreciate your help with this.

[Christopher]

Hi there,

Please update your code in topbar to :

<div class="cs-hide-md cs-hide-sm cs-hide-xs">This is GK Strategy | gktrategy.com</div><div class="cs-hide-xl cs-hide-lg call-button"><a href="tel:+442073401150"><span>Call 020 7340 1150</span></a></div>

Add this CSS :

@media (max-width:979px){
.x-topbar .x-social-global{
display:none;

}
}

Update this code :

body .x-navbar li.call-button {
    background-color: rgb(255, 160, 0);
}

To :

body .x-navbar li.call-button,.call-button {
    background-color: rgb(255, 160, 0);
}

Hope it helps.

[Smarticle]

Cheers Christopher,

It kinda worked but, unfortunately, it bloated the Topbar in desktop view. The font size (of This is GK Strategy | gktrategy.com) increased considerably and the whole Topbar ended up with a height of more than 100px… plus the social icons on the right were pushed right down to the bottom of the Topbar—with no padding—actually touching the Navbar.

The button in mobile view ended up with orange text—which blended into the button—going dark orange on hover. Basically the button text inherited the global link styling, rather than the whole button inheriting the global button styling.

Any thoughts on how to swerve these issues? I’ve gone with a temporary solution at the mo, by just adding a basic phone number link in the text… but I would like it to be more obvious, so…

How do I brighten the text in the Topbar? I’m guessing whatever controls the Topbar text opacity also controls the Footer text opacity. I’m cool with that brightening up as well if that’s the case.

[Christopher]

Hi there,

Please implement the code and provide us with logon credentials so we can take a closer look.

Thanks.

[Smarticle]

Great. Thanks. Will do. It’s a live site though, so I’ll have to do it out of hours (after 18:00 UK time)… but then there will only be a 12 hour window before I need to ensure the Topbar looks OK again, with or without the solution. Hopefully you’ll be able to fit it in to your schedule though.

[Christopher]

Hi there,

Just implement the code but keep topbar disable. When you give us access to your site, we’ll enable it and check the issue.

Thanks.

[Smarticle]

This reply has been marked as private.

[Rad]

Hi there,

The problem is when adding block element within paragraph block element breaks it. It’s the same effect when adding link within link.

Please change your topbar content to this,

<span class="cs-hide-md cs-hide-sm cs-hide-xs">This is GK Strategy | gktrategy.com</span><span class="cs-hide-xl cs-hide-lg call-button"><a href="tel:+442073401150"><span>Call 020 7340 1150</span></a></span>

Thanks!

[Author]

Posts