Phone Number Link on Mobile Nav Bar

[ajonesx]

Hi Xters…

Trying to add an active phone number link to the mobile nav bar (both collapsed & expanded.) Have managed to create what I’m trying to do visually (in image below) using the following code in the global CSS:

a.x-btn-navbar:after {
content: “310.399.3740”;
text-shadow: none;
color: #fff;
float: right;
background-color: #ff9900;
width: 180px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 0px;
padding-right: 15px;
margin-left: 0px;
margin-right: -15px;
}

Is there any href type code that could be added to have the orange area with the number activate a phone call when clicked ? Code for hover properties would be nice too lol!

BTW- I tried this approach because I’d like a phone link on the mobile nav bar… but keeping the mobile menu at full page-width when expanded is the most important factor. Should I be using another approach to achieve this?

Thanks

[christopher]

Hi there,

As you added the Phone Number to the :after pseudo-element content there is no tag to be able to select to add the link to it. The approach is wrong and the content inside the :after should be used only for decorative purposes and not actual information such as the phone number.

I suggest that you add the phone to the Widgetbar and use the widget. Add a unique class and then use the CSS code to set the position to the phone to absolute and use the top and left properties of the absolute positioning to fine tune the position of the phone number next to the menu toggle.

If you have further help, please add the phone number in the widget text and we will give you a starting CSS code that you can work on for fine-tuning.

The whole CSS will be wrapped in a @media directive to only show on mobile view and not desktop view.

Thank you.

[ajonesx]

Hi Christopher,

Thanks… to re-phrase what you said to be sure I’m understanding you:

1. Elements like the one I’m trying to create can’t be incorporated directly into the Nav Bar element (hmmm pseudo-elements… I was suspicious about the ‘:after’ and this was the reason I wrote in.)

2. You are suggesting that I create a new widget area in the header which only becomes visible at my mobile break point of 979px, duplicate the orange box with the phone # including an appropriate ‘href’ value inside of it, then force this new widget element with the phone # link downward (outside of the header area) to cover the desired part of the mobile navbar using absolute positioning values.

I’m hoping that repositioning this new widget area on the mobile navbar will mean that it won’t interfere with the existing full page-width widget area in the mobile header because it’s ‘below’ the mobile header.

Please let me know if I’m understanding you correctly before I start working on this lol!

Thanks again…

[scotbaston]

Out of curiosity, are you using X or Pro.

The layout you want would be really easy in Pro with the Header editor

[ajonesx]

Hi Scott,

X… was considering a change to Pro, but am concerned about increased coding and technical duties as a novice. However, I do find the idea of the header and footer builders attractive.

I’m at the beginning and now would be a good time for a switch. Any thoughts? Just doing a site or three for myself.

[scotbaston]

This is only my opinion, but if you are at the start of your website build I would suggest switching to Pro.

The only real difference is Pro has the Header & Footer builders but you are not required to use them. Also, Check out Donalds Youtube videos for tips & tricks about using Pro Link
The header/footer builder is a little confusing at first but the tutorials really help

The only other downside of switching to Pro is that the built in Demos aren’t available, but that has been beaten (in my opinion) by the new Design Cloud service which allows you to download templates for everything from Buttons to Page design

Happy to answer any questions if I can, although not sure the support forum is the best place… are you on the Facebook User group? > https://www.facebook.com/groups/xthemeusers/

Hope that helps

Scot

[christian]

Hey guys,

We have a Peer to Peer forum where you could discuss privately.

@ajonesx,

I would suggest that you switch to Pro as achieving that header design in X would actually need coding knowledge whereas you can create that using the header builder.

Thanks.