Docs

[Wannabiz]

Hello.

I have a top bar which consists of a few links, and I’m interested in adding another item (a dropdown). I found a code for this while searching the forum, and it works well, but the dropdown item is not placed right among the other items I already have in the top bar, and the size of it is also not the same. What can I do the adjust it?

html code:
—————–

<div class="topbar-dropdown">
      <a href="URL-Goes-Here">Let's Connect</a>
   <ul>
      <li><a href="URL-Goes-Here">Privacy Policy</a></li>
      <li><a href="URL-Goes-Here">Sub Link #2</a></li>
      <li><a href="URL-Goes-Here">Sub Link #3</a></li>
   </ul>
</div>

—————
css code:
—————

.topbar-dropdown {
   display: inline-block;
   vertical-align: top;
   position: relative;
}
.topbar-dropdown > a {display: block; height: 100%}

.topbar-dropdown ul {
   display: none;
   position: absolute;
   top: 100%;
   background: #ff6600;
   margin: 0;
   padding: 10px;
   min-width: 150px;
   list-style: none;
}

.topbar-dropdown:hover ul {
   display: block;
}

———————————–
Website’s URL: www1.wannabiz.com
———————————–

Many thanks!!

[Thai]

Hi There,

Please add this custom CSS:

.topbar-dropdown {
    margin-top: 9px;
    font-size: 18px;
    margin-left: 6px;
    color: #3a3a3a;
}
.topbar-dropdown > a {
    color: #3a3a3a   
}

Hope it helps 🙂

[Wannabiz]

You guys rock! Worked great.

Just a few remaining issues:

1. How can I make the “let’s connect” not clickable? because at the moment pressing on it (instead of just hovering) leads to the “Oops” page.
2. How can I add a dropdown arrow to “Let’s Connect”?
3. How can I get rid of the dots beneath the top bar items?
4. How can I reduce the spacing of the top bar beneath the items to make it even?
5. Is it possible to add the social icons together with the dropdown items?

Image attached. Thanks again!!

[Thai]

Hi There,

I checked your website but seems like the topbar has been disabled.

Could you please re-enable it?

Thanks.

[Wannabiz]

Hi sorry! the topbar is now re-enabled.

Thanks.

[Rad]

Hi there,

1. Please add this CSS,

.topbar-dropdown > a {
pointer-events: none;
}

Or simply edit your HTML code and replace this URL-Goes-Here with this #

2. Please change your HTML code to this

<a href="#">| Let's Connect <i class="x-icon" data-x-icon="&#xf103;"></i></a>

3. Please add this as well,

.topbar-dropdown  a {
    border: 0px !important;
}

4. Add this too,

  .x-topbar-inner > p:nth-last-child(2) {
  display:none;
  }

5. Yes, but please add your social URLs first, they are currently empty. Then add this CSS

.x-topbar .x-social-global {
float: left;
margin-left: 20px;
}

Hope these helps.

[Wannabiz]

Thanks for the help! It seems the second section didn’t have any effect and the dots still appear beneath the topbar items. Another thing – I probably didn’t explain myself good enough – I’m interested in placing the social icons aside to the dropdown items of ‘Let’s Connect’, and not aside to ‘Let’s Connect itself. I attached an image for clarification.

Thanks!!

[Wannabiz]

*Third section.

[Rue Nel]

Hello There,

Do you want something like this:

Please edit your topbar content and add the facebook icon for example like this:

<li><a href="URL-Goes-Here"><i class="x-icon-facebook" data-x-icon=""></i> Facebook</a></li>

You can get the unicode html entities or the data-x-icon value from this site: http://fontawesome.bootstrapcheatsheets.com/

Hope this helps. Please let us know how it goes.

[Wannabiz]

Worked great! thanks.

There are 2 LAST remaining issues:

1. The code you suggested before for removing the dots beneath the topbar items didn’t have any affect. How can I get rid of them? The ‘Let’s Connect’ item is the only one without dots beneath it.

2. How can I get the phone number in my top bar to not show on mobile – but instead show a phone icon that will call the number when pressed?

Your help is priceless. Thanks.

[Rue Nel]

Hello There,

Thanks for the updates!

1] Please update this block of code:

.topbar-dropdown  a {
    border: 0px !important;
}

You’ll need to use this code instead:

.topbar-dropdown a,
.x-topbar .p-info a {
    border: 0px !important;
}

2] You will have to modify the code for the phone number. You should have something like this:

| <a href="tel:7135745440"><span clas="telno-desktop">(713) 574-5440</span><span class="telno-mobile"><i class="x-icon-phone-square" data-x-icon=""></i></span></a>

And then you will need to use this custom css to show/hide the phone icons:

.telno-desktop {
  display: block;
}

.telno-mobile {
  display: none;
}

@media(max-width: 767px){
  .telno-desktop {
    display: none;
  }

  .telno-mobile {
    display: block;
  }
}

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

[Wannabiz]

Hello again!

The unwanted dots has been removed and it works great.

The phone number with the phone icon appears both on desktop and on mobile, instead of showing only the icon on mobile..I would also like the phone number to be unclickable on desktopp/tablet..

Thanks!

[Wannabiz]

Ok- my bad. The icon does not appear on desktop after all. However – the number appears on mobile, and i want there only the icon. And I would also like the number on desktop to be unclickable.

Thanks!!

[Rue Nel]

Hello There,

Please update the code and use this:

| <a class="tel-no" href="tel:7135745440"><span clas="telno-desktop">(713) 574-5440</span><span class="telno-mobile"><i class="x-icon-phone-square" data-x-icon=""></i></span></a>

And then you need to update the custom css too;

.telno-desktop {
  display: block;
}

.telno-mobile {
  display: none;
}

@media(min-width: 980px){
  a.tel-no {
    pointer-events: none;
  }
}

@media(max-width: 767px){
  .telno-desktop {
    display: none;
  }

  .telno-mobile {
    display: block;
  }
}

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

[Wannabiz]

Worked beautifully!! It looks great on desktop, but on mobile things get a bit messy..I attached an image. Can you please help make the topbar on mobile look normal?

Thanks in advance!

[Author]

Posts