WordPress.org

Forums

Again:Horizontal footer menu (7 posts)

  1. nadafouad
    Member
    Posted 2 years ago #

    Hi all,

    I know this topic has been tackled at least twice before. i looked at both http://wordpress.org/support/topic/horizontal-footer-menu?replies=5
    and
    http://wordpress.org/support/topic/plugin-for-a-footer-navigation-menu?replies=9
    but i kind of got lost.

    I used the code inside this thread, http://wordpress.org/support/topic/plugin-for-a-footer-navigation-menu?replies=9, but with no luck!

    i added

    <ul class="navmenu">
    <?php wp_list_pages( 'title_li=' ); ?>
    </ul>

    in the footer.php

    and in the style.css

    ul.navmenu {margin:10px 0;overflow:hidden;}
    ul.navmenu li {padding:0 30px 0 34px;list-style-type:none;display:inline;}
    ul.navmenu li a,#footernav a:active,#footernav a:visited{color:#<strong>COLOR OF CHOICE</strong>;text-decoration:none;}
    ul.navmenu li a:hover{text-decoration:underline;}

    This didn't work.
    Could anyone help in this?

    Thanks

  2. Andrew
    Forum moderator
    Posted 2 years ago #

    Can you post a link to the website with the problem?

  3. nadafouad
    Member
    Posted 2 years ago #

    http://tbs-madinaty.com/test/

    However, i removed all extra code that i put, and just tried again with the Dropdown Menu widget. It also isnt working right (it just groups the menu items that i have together and doesnt align them horizontally like i think it should.

    thanks

  4. Andrew
    Forum moderator
    Posted 2 years ago #

    It looks horizontal to me http://awesomescreenshot.com/0f6t8ji2d

  5. jhonb
    Member
    Posted 2 years ago #

    You can use the CSS property float: left; instead of display inline.

    Something like

    ul.navmenu li {
         float: left;
         margin-right: 10px;
    }

    Btw you need to fix float containment using hacks like a clearfix or creating a div with the class clear

    It will look like:

    <ul class="navmenu">
    <?php wp_list_pages( 'title_li=' ); ?>
    </ul>
    <div class="clear"></div>

    And css:
    .clear {clear:both;}

  6. nadafouad
    Member
    Posted 2 years ago #

    @andrew:
    Apparently its a browser issue!!! IE and firefox display them condensed whereas when i tried chrome it did display it horizontally!!havent tried it using safari though!

    How could this be fixed then!? Would using the above code fix it for all browsers?

    Thanks

  7. nadafouad
    Member
    Posted 2 years ago #

    @jhonb, where exactly would these code snippets be placed? tried footer.php and style.css but nothing worked.

    Any idea why this works well chrome only (without changing or adding new code).

    thanks

Topic Closed

This topic has been closed to new replies.

About this Topic