WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Custom Nav Bar (8 posts)

  1. strikedamic
    Member
    Posted 6 years ago #

    Hey all
    I am using the Dark City 1.0 Theme, adjusted to fit my needs.
    I successfully coded a authors-only page, visible in the nav bar upon login.
    Because I wanted that link to look different than the others, I created a new part in the CSS called "navrest" (like Navigation Restricted - the original CSS div id for the nav bar is called "nav"). Everything's ok so far but ... why the hell does it always do line breaks? This screws up my entire layout. I want the nav bar entry to be on the same line as the other public links.
    Check http://hot.sinister.ch to see how it looks like for an unregistered user. See the nav bar above and image one of those entries called "Authors" but with a yellow background instead of crimson red.
    Here's the "header.php" code:

    <div id="nav">
    <ul><li class="page_item"><a href="<?php bloginfo('url'); ?>/"><?php _e('Home'); ?></a></li>
    <?php
      if (2 <= $user_level) { ?>
      </div><div id="navrest"><a href="http://sinister.ch/hot/wp/?page_id=8">Authors</a></li></div><div id="nav">
      <?php } ?><?php wp_list_pages('title_li=' ); ?><?php include 'stats.php'; ?>
    </ul></div>

    (The include refers to a self-written piece of code that shows the blog statistics)

  2. strikedamic
    Member
    Posted 6 years ago #

    (continued in a new reply for easier viewing)

    And here's the new and the old CSS:

    #navrest {
     color:#ff0000;
     margin: 20px 0 0 10px ; padding:10px 0 0 0 ;
     font: 18px Arial, Helvetica, sans-serif;
     text-transform:uppercase;
     height: 21px;
    }
    #navrest ul {
     margin: 0; padding: 0;
    }
    #navrest ul ul {
    	display:none;
    }
    #navrest li.page_item a:link, #navrest li.page_item a:visited {
     color: #000000;
     background: #00FF00;
    }
    #navrest li a {
     padding: 4px 10px 0px 10px;
     text-decoration: none;
    }
    #navrest li {
     display: inline;
    }
    #navrest li a:hover, #navrest li.current_page_item a:link, #navrest li.current_page_item a:visited {
     color: #ffffff !important;
     text-decoration: none;
    }
    #nav {
     text-align:left;
     color:#ff0000;
     margin: 20px 0 0 10px ; padding:10px 0 0 0 ;
     font: 18px Arial, Helvetica, sans-serif;
     text-transform:uppercase;
     height: 21px;
    }
    
    #nav ul {
     list-style: none;
     margin: 0; padding: 0;
    }
    #nav ul ul {
    	display:none;
    }
    #nav li {
     display: inline;
    }
    #nav li.page_item a:link, #nav li.page_item a:visited {
     color: #000000;
     background: #B30000;
    }
    #nav li a {
     padding: 4px 10px 0px 10px;
     text-decoration: none;
    }
    #nav li a:hover, #nav li.current_page_item a:link, #nav li.current_page_item a:visited {
     background: url(images/bg_nav.gif) no-repeat top center;
     color: #ffffff !important;
     text-decoration: none;
    }

    What am I missing? Please help!

    Best, Thomas

  3. strikedamic
    Member
    Posted 6 years ago #

    Please, anyone?

  4. strikedamic
    Member
    Posted 6 years ago #

    OK I decided to put the links for logged in users one line lower than the public nav bar. By playing with the CSS, I figured that out. Still, there's about 30px distance from the "lower" nav bar to the search bar that I just can't get out.

  5. strikedamic
    Member
    Posted 6 years ago #

    Sorry for reposting but hey, seems like no one reads this anyway. Maybe I'll get lucky :)

    The attempt to make the logged-in-users-additional-navbar look right failed. I can't make it touch the search bar, while in IE, it won't even show.

    I give up for today. Too much sweat and tears.

    Please, I need help. Desperately.

    EDIT: Great. Now the sidebars don't play along with the general page width anymore. I'm close to tears.

  6. Jeremy Clark
    Moderator
    Posted 6 years ago #

    It would be very hard for anybody to help since your doing something for logged in users only, perhaps if you just create a dummy user account and post the details here. Make sure it is only set to subscriber. Then we can actually see what your talking about.

  7. strikedamic
    Member
    Posted 6 years ago #

    Damn.
    I killed my additional stuff since I had enough of it yesterday. Today, I can't make it work without making the page look weird.
    Just please tell me:
    What are the changes that I have to make?
    I believe that I can copy the #nav's in the CSS, rename them to "navrest" and just apply minor changes for the text background to be green instead of crimson red. Then I'd have to manually add links to header.php like this one:

    <div id="nav">
    <ul>
    <li class="page_item"><a href="<?php bloginfo('url'); ?>/"><?php _e('Home'); ?></a></li>
    <?php wp_list_pages('title_li=' ); ?>
    </ul>
    
    <div id="navrest>
    <ul>
    <li class="page_item"><a href="TESTLINK">TEST ENTRY</a></li>
    <li class="page_item"><a href="TESTLINK">TEST ENTRY 2</a></li>
    </div>
    <?php include 'stats.php'; ?></ul>
  8. strikedamic
    Member
    Posted 6 years ago #

    Oh wow.
    Guys. I did it.
    I worked on the CSS, creating a subclass (li) for nav, and it's cool. Works in IE and Opera.
    Thanks to you jeremyclark13 for the reply!

Topic Closed

This topic has been closed to new replies.

About this Topic