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

Classic General
21

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.

2017-06-08_14-40-21.png714×177 37.6 KB

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

1 Like
22

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:

23

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

@media (max-width: 840px) {
li.name.collapse::after {
    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
24

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

25

How about this?
http://test.bigwhiteduck.com/topbar-tel/

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.

2 Likes
26

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

27

Here you go:
http://bwd.d.pr/srEGr1

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.

2 Likes
28

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

1 Like
29

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

Screen Shot 2017-06-08 at 4.36.25 PM.jpg1920×1080 446 KB

30

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.

31

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.

2 Likes
32

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
33

here is the file with it changed and visible on all sizes
http://bwd.d.pr/5M0vlP

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.

2 Likes
34

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.

35

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

2 Likes
36

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