WordPress.org

Ready to get started?Download WordPress

Forums

Added Footer Menu - displays vertically and not horizontally (10 posts)

  1. kabbashdesign
    Member
    Posted 1 year ago #

    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 = http://kabbashdesign.com/client2/

  2. Emphacy
    Member
    Posted 1 year ago #

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

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

  3. kabbashdesign
    Member
    Posted 1 year ago #

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

  4. kabbashdesign
    Member
    Posted 1 year ago #

    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

  5. kabbashdesign
    Member
    Posted 1 year ago #

    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.

  6. Emphacy
    Member
    Posted 1 year ago #

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

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

  7. kabbashdesign
    Member
    Posted 1 year ago #

    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!!

  8. Emphacy
    Member
    Posted 1 year ago #

    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...

  9. kabbashdesign
    Member
    Posted 1 year ago #

    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:
    http://www.s-squaredsearch.com/

    Thanks again!

  10. kabbashdesign
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.