Horizontal Footer Menu

  • I’m trying the relatively easy task of aligning my menu items inline with eachother. My menu currently looks like this:

    <section id="nav_menu-2" class="widget widget_nav_menu">
    <h3 class="widget-title">Get Social</h3>
    <div class="menu-socials-container">
        <ul id="menu-socials" class="menu nav flex-column">
           <li id="menu-item-100" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-100 nav-item"><a href="https://instagram.com" class="nav-link"><i class="fab fa-instagram"></i></a></li>
           <li id="menu-item-101" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-101 nav-item"><a href="https://facebook" class="nav-link"><i class="fab fa-facebook"></i></a></li>
        </ul>
     </div>
</section>

    I’ve used the css below and several other variations to no avail.

    #menu-socials li{
   display: inline-block;
   margin-right:10px;
}

    The social icons display, however they appear in a vertical list. Any tips on how to get them to align horizontally?

    My apologies I don’t have a live site where this can be viewed at the moment. I’m working locally!

    Update: If I remove the flex-column class from this ul, the menu items display inline horizontally. Any ideas of where I can remove this class?

    • This topic was modified 4 years, 6 months ago by jplafata.
    • This topic was modified 4 years, 6 months ago by jplafata.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Euler

    (@eulerarthur)

    Hi, jplafata,
    Try to modify this class (in additional CSS) like this:

    .flex-column {
    display: inline;
    }

    Hi there,

    display: inline-block; should work. 2 things I can think of:
    1. for some reason the new style is not applied / uploaded.
    2. the style is overridden by another rule.

    Could you select the #menu-socials li element, right-click and go ‘Inspect element’?
    that will show you the HTML code of the element and the rules that style your element.

    Try to find the rule you wrote and see if it is active or overridden (crossed over)

    Thread Starter jplafata

    (@jplafata)

    @websm22 @eulerarthur
    Thank you both for your replies! I ended up tracking down what was going on. The parent theme is calling a script that was using JQuery to add the bootstrap class flex-column. I made a similar script that loads afterword and removes that class and the menu items now display inline. Now I’m wondering if this is the correct way to go, it seems like a heavy solution performance wise. I’m going to retry doing this with css (maybe calling the new style sheet after the parent’s js adds the flex-column class?) If that still doesn’t work I might try restructuring the footer widget to work with flex-column. Thoughts?

    Hi there, if you write a very specific rule in your normal css
    1. it will override the less specific rule for .flex-column no matter when it is declared
    2. it will not affect all the other instances of .flex-column used in the theme

    something like this:
    #nav_menu-2 .menu-socials-container ul#menu-socials.flex-column li {
    display: inline-block !important;
    margin-right:10px !important;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Horizontal Footer Menu’ is closed to new replies.

Tags