WordPress.org

Forums

Customized/Matching Nagivation Bar and elements (3 posts)

  1. rahjabodyart
    Member
    Posted 6 years ago #

    Currently running most updated copy of WP, however, I would like to display the same navigation bar that I am using on the website in development in the WordPress Header.

    (see http://www.glennbrandonburke.com/test/index.php)

    As far as the blog, I have gotten this far:
    (www.glennbrandonburke.com/blog/)

    As you can see I have lost the fixed width and the drop down elements that was on the original site are not working properly.

    On the original site, I am using SSI's in PHP to impliment the menu (www.glennbrandonburke.com/test/menu.php)

    Does anyone have a better way of handling this or some insite into the code that I am missing (my knowledge of php is somewhat limited).

    Any help would be appreciated!

    Thank you.

  2. stvwlf
    Member
    Posted 6 years ago #

    Hi

    As far as the fixed width, you need to create a div just below your body tag called something like <div id="wrapper> in header.php

    and close that tag </div> in footer.php, just before the closing body tag </body>

    In your css, add this

    #wrapper {
      width: 750px;
      margin: 0 auto;
    }

    That will center it mid-page and give it a fixed width.

    As far as dropdowns... The ones on your original site are done with javascript. You could do it that way again. Most WP dropdowns are done with CSS. The CSS is pretty tricky until you learn what you are doing.

    There are some dropdown plugins - take a look on http://wordpress.org/extend/plugins/ to see if any seem to fit your needs.

    Another approach is to borrow code and CSS from a theme that already has dropdowns built in.

    The root of dropdowns in WP is wp_list_pages(). The dropdown items are created as child pages of the top level nav item pages. You do this in Edit Pages in the Admin section by assigning a Parent Page to a page. wp_list_pages then automatically creates a structure that looks like this

    • presentations
      • Pure Motivation
      • Corporation

    It then needs to be styled in CSS.
    Hopefully this is a bit useful to you.

  3. rahjabodyart
    Member
    Posted 6 years ago #

    Thank you. I have to be gone for a few days but going to see if I can sneak this in to try this. Will let you know how I do!

    Thanks for your insight.

Topic Closed

This topic has been closed to new replies.

About this Topic