Cynthia Woodard Cynthia Woodard - 3 months ago 13
CSS Question

How can I position the font awesome expanded menu indicator directly next to the menu text?

Working on this site:
https://voyagers.wildapricot.org/

Trying to get the font awesome arrow to the right of the menu nav items (which indicates there are sub-pages) to show up immediately to the right of the text instead of with a giant space in between text and arrow.

Would appreciate any help, thank you!

Answer

Technically, this is how you would do it:

Step 1: in the following CSS rule, change the display value to inline-block.

.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a {
display: inline-block;
text-decoration: none;
text-align: center;
vertical-align: top;
white-space: nowrap;
position: relative;
font: normal 18px/26px Oswald, Helvetica, sans-serif;
overflow: hidden;
}

Step 2: In the following rule, change the right-padding to 15px (the second value in the padding rule).

.WaGadgetMenuHorizontal.menuStyle004 .menuInner ul.firstLevel > li > .item > a > span {
 padding: 15px 15px 15px 10px;
 ...
 }

Step 3: In the following, change the right offset to 0 (or equivalently 0px).

.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.dir > .item > a::after {
content: "\f107";
font-family: FontAwesome;
color: white;
position: absolute;
display: inline-block;
top: 15px;
right: 0px;
}

I am assuming that you have access to all the CSS stylesheets in your content management system (web builder platform).

If not, you need to add these rules to override the pre-existing rules, so you need to learn how to do that first. You may need to get help from the tech support people where you are hosting.

Note: I went to your website using Firefox and I inspected the various elements and tried out these three steps and that did the trick. Make sure to check out the other major browsers (Chrome and IE).

Keep in mind that these changes will change the overall look of the navigation so you may have other visual side effects that may not be suitable for your design.

Aside: the HTML in questions looks like the following (I omitted a few wrapping div's):

<ul style="" class="firstLevel">
  <li class="sel">
    <div class="item"><a href="https://voyagers.wildapricot.org/" title="Home"><span>Home</span></a></div>
  </li>
  <li class="">
    <div class="item"> <a href="https://voyagers.wildapricot.org/Coop" title="Coop"><span>Coop</span></a> </div>
  </li>
  <li class="dir">
    <div class="item"><a href="https://voyagers.wildapricot.org/Resource-Center" title="Resource Center"><span>Resource Center</span></a>
      <ul class="secondLevel">
        <li class=" ">
          <div class="item"><a href="https://voyagers.wildapricot.org/page-1075491" title="Home (Demo)"><span>Home (Demo)</span></a></div>
        </li>
      </ul>
    </div>
  </li>
  <li class="">
    <div class="item"> <a href="https://voyagers.wildapricot.org/Events" title="Events"><span>Events</span></a> </div>
  </li>
  <li class="dir">
    <div class="item"> <a href="https://voyagers.wildapricot.org/About-Us" title="About Us"><span>About Us</span></a>
      <ul class="secondLevel">
        <li class=" ">
          <div class="item"> <a href="https://voyagers.wildapricot.org/Donate" title="Donate"><span>Donate</span></a> </div>
        </li>
      </ul>
    </div>
  </li>
  <li class="last-child">
    <div class="item"> <a href="https://voyagers.wildapricot.org/Volunteer" title="Volunteer"><span>Volunteer</span></a> </div>
  </li>
</ul>
Comments