Top Box with Drop Zone Phone # and Pin Stack Phone #

Trying to do that within the top bar would be tough. The way the TB was coded for RW it has the logo/title/slogan all within an anchor tag on the left. Everything to the right is within the toggle area for the dropdown, meaning it will collapse at the breakpoint. The Dropzone was also coded in the toggle area.

Now you could place a phone number outside of the top bar and set it to display only within a starting and ending screen width.

I have the above working with a pin stack set to hide at the 840px.

1 Like

Yes, I understand how I could do that below the Top Bar… I tried every which way to get it on top of it with and without Pin, with multiple Top Bars, etc.

So I couldn’t place a pinned stack on top of the Top bar in the middle? I tried that yesterday and it worked except for landscape view and the # showing up in the drop down menu.

If not, then I will just leave it out, maybe add it somewhere else.

thank again for your help. You should be teaching a master class :slight_smile:

You can add “text” with CSS but not a link for the phone;

@media (max-width: 840px) { {
    content: "323-538-5773";
    position: absolute;
    top: 25px;
    left: 200px;
    font-size: 1.5rem;
    color: inherit;
    font-family: inherit;
    font-weight: bold;

The above would add a phone number between logo and hamburger. However it wouldn’t be a link. You would have to play with position, set your color and fonts, etc.

1 Like

thanks, Doug. I’m working on some other layout issues now so I’ll try this later.

How about this?

We can selectively show and hide at any breakpoints that you want with just a couple of lines of CSS. It won’t mess with the divider code or anything in the menu itself.


Sure. I don’t care how it’s done, just that it works :slight_smile:
Latest File

Here you go:

If you ever need to change the phone number it is just in the site-wide javascript.

Other than that there are a few lines of CSS at the bottom of your site wide CSS. It needed more to just apply the font and the color than to position the number. If ever you start using Font Pro we could get rid of all that for just one class name, but it is not a problem as it is now.


Oh yes - and I turned off the zone in top bar completely. No need for it now.

1 Like

I couldn’t get this to work. It doesn’t show the phone # on tablet view. That’s just previewing your file.

I also tried copying it to my file and it seemed to mess up the menu… it showed up vertically on the right. IDK. I know I ask for things that I should be able to do lol.

Sorry - force of habit, I typed 640px in the breakpoint CSS instead of 840px as you have set.

At the bottom of the site wide CSS, just change the 2 media queries from 640px to 840px and you will be good.


ok. lol I didn’t even check that. My eyes are also old… sometimes I mix my 6s and 8s. Will try again.

1 Like

here is the file with it changed and visible on all sizes

We need the breakpoints as there are actually 2 telephone numbers there. The mobile one is in a slightly different position in the topbar HTML to make it all work. We just show that for the mobile menu and the other one for the desktop menu.


ok. Will try the new file. I got it to work on your first file, changing to 840, but then couldn’t get it to work in my real file.

email me your latest actual one if you want and I will sort it out tomorrow.


I finally got it, with the right combo of CSS, java and Top Bar.

I probably spent 6 hours on this.

thank you thank you thank you!

1 Like