9 Replies - 845 Views - Last Post: 30 August 2019 - 11:09 AM

#1 Tophel27   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 28-August 19

How to remove space between each links in a drop-down menu

Posted 28 August 2019 - 03:15 PM

Hi, I've been working with a drop-down menu but I'm having difficulty in removing the space between the links on my list. Already tried different tags to adjust the space like paddle:0; margin:0; font:0; and other stuff like that but to no avail. Here's the code I am doing:

<ul class="nav navbar-nav" style="margin: 0; display: inline-block;">
<div class="dropdown">
<div class="dropdown-content">
</div>
</div>
<li class="dropdown" style="margin: 0;">
<a href="https://www.manuelsuareztraining.com/free-mini-course" class="dropdown-toggle" data-toggle="dropdown">Online Training</a>
<ul class="dropdown-menu">
<li><a href="https://www.manuelsuareztraining.com/facebookmasters">Facebook Masters Course</a></li>
<li><a href="https://www.manuelsuareztraining.com/manychat-mini-course">Free Messenger Course</a></li>
<li><a href="https://www.manuelsuareztraining.com/free-mini-course">Free FB Ads Course</a></li>
</ul>
</li>
</ul>



Any help will be greatly appreciated. Thanks!

This is how my drop-down looks like, the Facebook Masters Course should have no space between them

Posted Image

This post has been edited by andrewsw: 29 August 2019 - 03:34 AM
Reason for edit:: added missing code tags


Is This A Good Question/Topic? 0
  • +

Replies To: How to remove space between each links in a drop-down menu

#2 brep   User is offline

  • D.I.C Head
  • member icon

Reputation: 23
  • View blog
  • Posts: 178
  • Joined: 26-August 11

Re: How to remove space between each links in a drop-down menu

Posted 28 August 2019 - 03:56 PM

Could you provide the entire css file for us to look at? Also, it's padding not paddle in case that's how you spelled it in the css.
Did you try applying padding: 0 and margin: 0 to the <a> tags and <li> tags of the dropdown menu, or did you apply the styling to different elements?

This post has been edited by brep: 28 August 2019 - 03:56 PM

Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6823
  • View blog
  • Posts: 28,276
  • Joined: 12-December 12

Re: How to remove space between each links in a drop-down menu

Posted 29 August 2019 - 03:34 AM

The first thing to correct is that a UL should only have LI's as direct children, not divs.
Was This Post Helpful? 0
  • +
  • -

#4 Tophel27   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 28-August 19

Re: How to remove space between each links in a drop-down menu

Posted 29 August 2019 - 09:20 AM

View Postbrep, on 28 August 2019 - 03:56 PM, said:

Could you provide the entire css file for us to look at? Also, it's padding not paddle in case that's how you spelled it in the css.
Did you try applying padding: 0 and margin: 0 to the <a> tags and <li> tags of the dropdown menu, or did you apply the styling to different elements?





Thanks for the reply. I tried inserting the tag padding: 0 and margin: 0 into the UL, LI, <a> tag, it's a snippet code btw, inserted to a header section, this is the code for the header section where I inserted the snippet codePosted Image
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6823
  • View blog
  • Posts: 28,276
  • Joined: 12-December 12

Re: How to remove space between each links in a drop-down menu

Posted 29 August 2019 - 09:57 AM

Please copy and paste code, between code tags. Screenshots are a poor substitute.
Was This Post Helpful? 0
  • +
  • -

#6 Tophel27   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 28-August 19

Re: How to remove space between each links in a drop-down menu

Posted 29 August 2019 - 01:07 PM

{% endif %}
     {% if h-ShowMenu %}
        <div class="header-ham">
          <span></span>
          <span></span>
          <span></span>
        </div>
     {% endif %}
      <div kjb-settings-id="{{ kjb-H-Menu }}" class="header-menu">
        {% if h-ShowMenu %}
   {% include "dropdown1" %}
          {% for link in current_site.link_lists[h-Menu].links %}
            <a href="{{ link.url }}">{{ link.name }}</a>
          {% endfor %}
        {% endif %}
        {% for block in section.blocks %}
          {% include "cta_block" %}
        {% endfor %}
        {% include "user_dropdown" %}
      </div>
    </div>
  </div>
{% endif %}

This post has been edited by andrewsw: 30 August 2019 - 12:06 AM
Reason for edit:: added missing [code][/code] tags

Was This Post Helpful? 0
  • +
  • -

#7 brep   User is offline

  • D.I.C Head
  • member icon

Reputation: 23
  • View blog
  • Posts: 178
  • Joined: 26-August 11

Re: How to remove space between each links in a drop-down menu

Posted 29 August 2019 - 04:54 PM

What is the CSS for {% include "dropdown1" %}? You pasted the HTML. Copy and paste the CSS, then we can see what is causing the extra space.

Out of curiosity, are you using Shopify?

This post has been edited by brep: 29 August 2019 - 04:55 PM

Was This Post Helpful? 0
  • +
  • -

#8 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6823
  • View blog
  • Posts: 28,276
  • Joined: 12-December 12

Re: How to remove space between each links in a drop-down menu

Posted 30 August 2019 - 12:06 AM

@OP Please wrap your posted code in code tags, I have done this for you on this occasion.
Was This Post Helpful? 0
  • +
  • -

#9 Tophel27   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 28-August 19

Re: How to remove space between each links in a drop-down menu

Posted 30 August 2019 - 10:37 AM

Hi, I really appreciate the help but I don't know exactly where's the CSS code for this. Below is the snippet code for {% include "dropdown1" %}. And this code {% include "dropdown1" %} is inserted in the header section.

Btw, the site is in Kajabi.

<code> <ul class="nav navbar-nav" style="margin: 0; display: inline-block;">
02
<div class="dropdown">
03
<div class="dropdown-content">
04
</div>
05
</div>
06
<li class="dropdown" style="margin: 0;">
07
<a href="https://www.manuelsuareztraining.com/free-mini-course" class="dropdown-toggle" data-toggle="dropdown">Online Training</a>
08
<ul class="dropdown-menu">
09
<li><a href="https://www.manuelsuareztraining.com/facebookmasters">Facebook Masters Course</a></li>
10
<li><a href="https://www.manuelsuareztraining.com/manychat-mini-course">Free Messenger Course</a></li>
11
<li><a href="https://www.manuelsuareztraining.com/free-mini-course">Free FB Ads Course</a></li>
12
</ul>
13
</li>
14
</ul>

</code>

[code] <ul class="nav navbar-nav" style="margin: 0; display: inline-block;">
02
<div class="dropdown">
03
<div class="dropdown-content">
04
</div>
05
</div>
06
<li class="dropdown" style="margin: 0;">
07
<a href="https://www.manuelsuareztraining.com/free-mini-course" class="dropdown-toggle" data-toggle="dropdown">Online Training</a>
08
<ul class="dropdown-menu">
09
<li><a href="https://www.manuelsuareztraining.com/facebookmasters">Facebook Masters Course</a></li>
10
<li><a href="https://www.manuelsuareztraining.com/manychat-mini-course">Free Messenger Course</a></li>
11
<li><a href="https://www.manuelsuareztraining.com/free-mini-course">Free FB Ads Course</a></li>
12
</ul>
13
</li>
14
</ul>

[/code>]
Was This Post Helpful? 0
  • +
  • -

#10 Tophel27   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 28-August 19

Re: How to remove space between each links in a drop-down menu

Posted 30 August 2019 - 11:09 AM

Btw, if I insert the {% include "dropdown1" %} under the 1st {% if h-ShowMenu %}, the drop-down has no spaces in between though the text is like on top of another text and the menu is not aligned to the navigation bar, it is displayed on the top of the logo. But once I insert the code to the 2nd {% if h-ShowMenu %}, the main link is aligned to the other menu in the navigation bar but there are big spaces in between links.

Attached image(s)

  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1