WordPress.org

1. nadafouad
   Member
   Posted 4 months 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 Nevins
   Volunteer Moderator
   Posted 4 months ago #
   

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

3. nadafouad
   Member
   Posted 4 months 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 Nevins
   Volunteer Moderator
   Posted 4 months ago #
   

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

5. jhonb
   Member
   Posted 4 months 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 4 months 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 4 months 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

Reply

You must log in to post.