Added Footer Menu – displays vertically and not horizontally

  • I added a new menu to my theme by adding the following to the footer.php file in my child theme:
    <div id=”footermenu”>
    <?php wp_nav_menu( array(
    ‘container_class’ => ‘menu-footer’,
    ‘theme_location’ => ‘footer’
    ) ); ?>
    </div>

    I then added the Footer menu in the dashboard. The new menu appears in the footer area but the menu items are stacking vertically. I want menu items to stack horizontally and to keep this box thin.
    Help??

    My test site = https://kabbashdesign.com/client2/

Viewing 9 replies - 1 through 9 (of 9 total)

  • Change the display of your CSS class menu-footer list items to inline-block like this…

    .menu-footer ul li
    {
    display: inline-block;
    }

    Thread Starter kabbashdesign

    (@kabbashdesign)

    I dropped that into the end of my style.css file but nothing happened.
    Hmmm

    Thread Starter kabbashdesign

    (@kabbashdesign)

    Wait, I missed a piece. It made the menu display horizontally! Thank you.
    Now I will have to try and format it.

    Thanks again!
    Tom

    Thread Starter kabbashdesign

    (@kabbashdesign)

    Do you know how I can get the menu items spaced out more horizontally? I’m having a problem finding the source code. I am using Fire Bug but can’t always figure out where to go.

    Sure, just add a margin or padding to the class above…

    .menu-footer ul li
    {
    display: inline-block;
    margin-right: 15px;
    }

    Thread Starter kabbashdesign

    (@kabbashdesign)

    Wow, that’s pretty cool.
    Will you take a look at what I am doing and notice that I have these two icons, FB and Linkedin. Those appear to need more spacing or different spacing? They aren’t centering either???
    I have to run out for a bit but any more help will be greatly appreciated!!

    Find (or create) the css class .nav-facebook and .nav-linkedin and apply padding to each one…

    .nav-facebook
    {
    padding 0px 10px;
    }

    .nav-linkedin
    {
    padding: 0px 35px;
    }

    and as for the vertical alignment…

    .menu-footer
    {
    vertical-align: middle;
    }

    Get use to using lots of CSS classes to make your theme appear the way you want it. It’s all very very basic so if you need to figure out how to do something just Google it…

    Thread Starter kabbashdesign

    (@kabbashdesign)

    Hey, I’ve made some progress but not a whole lot.
    I added the padding and it helped spread out the spacing on those two items but how can I get them to move further toward the right of the boxes they seem to be sitting in?

    You can see the Nav at the bottom of the site here:
    https://www.s-squaredsearch.com/

    Thanks again!

    Thread Starter kabbashdesign

    (@kabbashdesign)

    Also, in Internet Exploder the Nav titles are showing above the icons??

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Added Footer Menu – displays vertically and not horizontally’ is closed to new replies.