WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to change the Page Navigation from the Top Left? (20 posts)

  1. stefo
    Member
    Posted 5 years ago #

    How to change the Page Navigation from the Top Left Corner?

    I would really like to display the pages navigation under the heading and horizontally just like a normal theme. How do i do this? Your help would be greatly appreciated.

    Regards
    Stef

    http://capedoctors.co.za

  2. esmi
    Forum Moderator
    Posted 5 years ago #

    Try adding:

    #menu li {display:inline;}

    to the bottom of your theme's stylesheet.

  3. stefo
    Member
    Posted 5 years ago #

    Hi Esmi

    I added that line and it changed the display slighty. its still not under the heading and lying horizontally. you can have a look: Any other Suggestions?

    Thanks Stef

  4. Mark / t31os
    Moderator
    Posted 5 years ago #

    #menu {float:left}
    #menu li {display:inline;margin:0 15px 0 0}

    Just need a float... :)

  5. stefo
    Member
    Posted 5 years ago #

    Hi Guys

    Thanks for both your help :-) I finally managed to do it after many attempts and combining what you both had to say-i also noticed a common problem that was keeping it all vertical. This is what i did.

    I added the coding you both provided at the bottom of my css. Still didnt work 100% so i went to look at the css section for the header. I noticed that it was displayed a s a block and i changed the following.

    /* =header */
    #header {margin:50px 0;text-transform:normal;width:600px;clear:none;float:left;}
    #header a:hover{text-decoration:none;color:#888;}
    #header h1 a{font-size:1.8em;font-weight:100;letter-spacing:-0.05em;position:relative;}
    #header #blog-description {color:#888;}
    #access {display:table;height:40px;vertical-align:middle;width20;float:left;}
    #access #menu {vertical-align:middle;display:table-cell;font-size:0.8em;}
    #access #menu ul {vertical-align:middle;display:block}
    #access #menu ul li ul {margin-left:10px;}
    #access #menu a{font-weight:800;}

    And that was it :-)

    Thanks for all the help and suggestions.
    Stef

  6. creativemonarchy
    Member
    Posted 4 years ago #

    Hello Stef,

    I tried applying these changes to "header" in CSS, and all is horizontally aligned, but it's still in the top right corner. Do you mind if I ask how you fixed that? :)

    Thank you!
    Rachel

  7. bigREDVJ
    Member
    Posted 4 years ago #

    creativemonarchy, i had the same problem. Damn top right corner, and i found the solution! It shows that when you are looking for the way out, you always find it.. i'm absolutely loser on this CSS stuff, but stefos idea helped me a lot. I'd say he missed one mistake..

    use this code instead:

    /* =header */
    #header {margin:50px 0;text-transform:normal;width:600px;clear:none;float:left;}
    #header a:hover{text-decoration:none;color:#888;}
    #header h1 a{font-size:1.8em;font-weight:100;letter-spacing:-0.05em;position:relative;}
    #header h1 a{font-weight:100;letter-spacing:-0.05em;position:relative;}
    #header #blog-description {color:#888;}
    #access {display:table;height:40px;vertical-align:left;width:600px;float:left;}
    #access #menu {vertical-align:middle;display:table-cell;font-size:1em;}
    #access #menu ul {vertical-align:middle;display:block}
    #access #menu ul li ul {margin-left:10px;}
    #access #menu a{font-weight:800;}

    Thanks, stefo!

  8. tonybanh.se
    Member
    Posted 4 years ago #

    hey guys,
    is there a way to remove sub-pages to display as navigation on the top header?
    cheers/Tony

  9. marcben19xx
    Member
    Posted 4 years ago #

    hm damn bigREDVJ's correction of the code still doesn't work for me :(

    has anyone experienced the same problem and found a solution?

  10. cblcruz
    Member
    Posted 4 years ago #

    Hi,
    I would like to know, if any of you know, where can I edit my page lists for the menu?

    Some pages I do not need to be listed and would like to have removed.

    I know that we can do that by using:
    <?php wp_list_pages('exclude=89' ); ?>

    Being 89 the page ID I want to exclude, and that on my header.php page but it doesnt work with AutoFocus Template.

    Any ideas on how to exclude pages from the top menu?

    Thanks,

  11. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    find the code in functions.php line 462 ;-)

  12. cblcruz
    Member
    Posted 4 years ago #

    Thank alchymyth,

    I changed line 462 as you said and I was able to remove the page from the list however a word "Pages" is shown on top of all my list (menu) now and that is, not only ugly, but unnecessary.
    --------from line 460-----

    function sandbox_globalnav() {
        echo '<div id="menu"><ul><li class="page_item"></li>';
        $menu = wp_list_pages('exclude=130','title_li=&sort_column=menu_order&echo=0'); // Params for the page list in header.php
        echo str_replace(array("\r", "\n", "\t"), '', $menu);
      echo '<li class="page_item"><a href="'. get_bloginfo_rss('rss2_url') .'"></a></li></ul></div>';
    }

    -------to line 465--------
    How do I remove the word "Pages" from the top of my menu?
    it only shows when I include the (Exclude=xxx) clause.

    Also, at the code there is a comment stating that we should pass the pararms from the header.php. Do you or anybody here knows how to do that since my menu is being formed via sandbox like that:
    <?php sandbox_globalnav() ?>

    Any help will be appreciated,

    Kindly,

  13. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    http://codex.wordpress.org/Template_Tags/wp_list_pages

    this should work:

    $menu = wp_list_pages('exclude=130&title_li=&sort_column=menu_order&echo=0'); // Params for the page list in header.php

    you need to use the special way to link the parameter - with the ampersand &

  14. cblcruz
    Member
    Posted 4 years ago #

    Hi alchymyth,

    Thanks a lot, that did the trick

    using the & to link the parameter I was able to remove the word "Pages" from my menu.

    Thanks again,

    cblcruz

  15. miabake1
    Member
    Posted 4 years ago #

    I've noticed my code for the nav to be horizontal only works in firefox and safari but not explorer...anyone else having this problem?

    /* =header */
    #header {margin:10px 0;text-transform:normal;width:600px;clear:none;float:left;}
    #header a:hover{text-decoration:none;color:#888;}
    #header h1 a{font-size:1.8em;font-weight:100;letter-spacing:-0.05em;position:relative;}
    #header #blog-description {color:#888;}
    #access {display:table;height:40px;horizontal-align:middle;width20;float:left;}
    #access #menu {horizontal-align:middle;display:table-cell;font-size:0.8em;}
    #access #menu li {display:inline;margin:0 15px 0 0}
    #access #menu ul li ul {margin-left:10px;}
    #access #menu a{font-weight:800;}

  16. sterestherster
    Member
    Posted 4 years ago #

    Wow, thanks for all the information in this post. I got the menu to be horizontally. Much better now. But how can I adjust it so there is less space between my picture/text in the header (Belevingsboek Dementie) and the menu? (http://www.belevingsboek-dementie.nl)

    I'm pretty new to editing themes, it's interesting and learning a lot through this forum.

    Any help would be appreciated!

  17. sterestherster
    Member
    Posted 4 years ago #

    Okay, found it...it was actually more easy than I thought...Now on to changing the font, the font color and font size of the menu.

  18. mdiggins
    Member
    Posted 4 years ago #

    I'm using this code for my header in the Autofocus Theme... I can I make the menu width span 100%. If I add code width: 100%; it changes from horizontal navigation to vertical but the width is 100%. Is there a better code? I tried the code above and the navigation is still vertical.

    /* =header */
    #header {margin: 5px 0;text-transform: none;width: 800px;clear: none;display: block;float: left;}
    #header a:hover {text-decoration:none;color:#888;}
    #header h1 a {font-size:.01em;font-weight:100;letter-spacing:-0.05em;position:relative;}
    #header #blog-description {color:#888;display:none;}
    #access {vertical-align:middle;padding: 0 0 10px 0;}
    /* #access {display:table;height:160px;horizontal-align:middle;width:200px;float:right;} */
    #access #menu {vertical-align:middle;display:inline;font-size:1.2em;}
    #access #menu ul {vertical-align:inline;display:block;background-color:#cccbcb;}
    /* I changed the menu button background colour here */
    #access #menu ul li {float: left;background-color:#71160f; z-index=1;}
    #access #menu ul li a{margin-left:10px;font-weight: bold;display: block;padding: 0 10px;}
    #access #menu a{font-weight:600;}

  19. Jenika
    Member
    Posted 4 years ago #

    My site is under construction (http://www.jenikaslens.com), but here is what I have so far. Thanks for everyone's comments on this page, this is what I cobbled together:

    /* =header */
    #header {margin: 5px 0;text-transform: none;width: 800px;clear: none;display: block;float: left;}
    #header a:hover {text-decoration:none;color:#888;}
    #header h1 a {font-size:.01em;font-weight:100;letter-spacing:-0.05em;position:relative;}
    #header #blog-description {color:#888;display:none;}
    #access {vertical-align:middle;padding: 0 0 10px 0;}
    /* #access {display:table;height:160px;horizontal-align:middle;width:200px;float:right;} */
    #access #menu {vertical-align:middle;display:inline;font-size:1.2em;}
    #access #menu ul {vertical-align:inline;display:block;background-color:#cccbcb;}
    /* I changed the menu button background colour here */
    #access #menu ul li {float: left;background-color:#FFFFFD; z-index=1;}
    #access #menu ul li a{margin-left:10px;font-weight: bold;display: block;padding: 0 10px;}
    #access #menu a{font-weight:600;}

  20. sdoubleyu
    Member
    Posted 4 years ago #

    i have tried putting in all of these and none of them have worked.. :(

Topic Closed

This topic has been closed to new replies.

About this Topic