WordPress.org

Support

Support » Themes and Templates » Customizr » nav bar question

nav bar question

  • dutchy77

    @dutchy77

    I have created a website: http://www.artention.nl.

    I want the top nav bar to look something like the nav bar on this site: http://www.airliners.net.

    And I want this menubar placed above the slider instead of the gray line which is there now and I would like to have it in redish (#F70D1A).

    Is this possible?

Viewing 14 replies - 1 through 14 (of 14 total)
  • rdellconsulting

    @rdellconsulting

    This Snippet will fix your grey bar.

    The change in Navbar is possible, but will take some CSS work.

    dutchy77

    @dutchy77

    Thanks! That works for changing the color.

    I am trying, but I am a newbe at this, so I came up with this code, but that doesn’t seem to work. I took it of this site: http://www.cssnewbie.com/example/horizontal-menu/ and combined it with your code. What is wrong with it?

    header.tc-header {
    border-bottom:  15px solid #F70D1A;
      #nav {
          width: 100%;
          float: left;
          margin: 0 0 3em 0;
          padding: 0;
          list-style: none;
          background-color: #F70D1A;
          border-bottom: 1px solid #ccc;
          border-top: 1px solid #ccc; }
       #nav li {
          float: left; }
       #nav li a {
          display: block;
          padding: 8px 15px;
          text-decoration: none;
          font-weight: bold;
          color: #F70D1A;
          border-right: 1px solid #ccc; }
       #nav li a:hover {
          color: #c00;
          background-color: #FF3F4C; }
    <ul id="nav">
    
    <li><a href="#">Individueel</a></li>
    <li><a href="#">Collectief</a></li>
    <li><a href="#">Professionals</a></li>
    <li><a href="#">Over Artention</a></li>
    <li><a href="#">Contact</a></li>
    }

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

    rdellconsulting

    @rdellconsulting

    You have a mix of CSS and HTML in the 2 boxes.

    The 2nd box has a missing </ul> and there is } which is CSS, not HTML. To change the menu will take some understanding of both HTML and CSS. The menu is generated by the Theme and you can’t simply insert that code. Those menu items can be setup using the Dashboard>Appearance>Menus. You’ll then need to style the menu using CSS.

    rdellconsulting

    @rdellconsulting

    Here’s the Codex Menu section.

    dutchy77

    @dutchy77

    Yes, I have set up the menu how I want it. But where can I insert the code? I have seen the section in the menu where I can assign a CSS Class, does this help to link it to a menu with a CSS code.

    This is how I would like it to appear in HTML code, but after this I am stuck.

    <!DOCTYPE>
    <html>
    <head>
    <style>
       #nav {
          width: 100%;
          float: left;
          margin: 0 0 3em 0;
          padding: 0;
          list-style: none;
          background-color: #F70D1A;
          border-bottom: 1px solid #ccc;
          border-top: 1px solid #ccc; }
       #nav li {
          float: left; }
       #nav li a {
          display: block;
          padding: 8px 15px;
          text-decoration: none;
          font-weight: bold;
          color: #069;
          border-right: 1px solid #ccc; }
       #nav li a:hover {
          color: #F70D1A;
          background-color: #fff; }
    </style>
    </head>
    
    <body>
    <div id="wrap">
         <ul id="nav">
    
    <li><a href="#">Individueel</a></li>
    <li><a href="#">Collectief</a></li>
    <li><a href="#">Professionals</a></li>
    <li><a href="#">Over Artention</a></li>
    <li><a href="#">Contact</a></li>
    </div>
    
    </body>
    </html>

    Do I need to insert it in the “header.tc-header”. That looks like this now:

    header.tc-header
    {
    border-bottom: 15px solid #F70D1A;
    }

    rdellconsulting

    @rdellconsulting

    You’re still confusing HTML and CSS code. I’m not being rude, but you do need to find someone who can help you as you are some way off the skills you need to get this done.

    WPyogi

    @wpyogi

    Forum Moderator

    Please use the code buttons when posting code – your code above messed up the forums – I’ve fixed it.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    dutchy77

    @dutchy77

    As an alternative, I tried this lines:

    add_action( 'init', 'register_secondary_menu' ); // this registers your menu with WP
    function register_secondary_menu() {
        if ( function_exists( 'register_nav_menu' ) ) {
            register_nav_menu( 'secondary-menu', 'Secondary Menu' );
        }
    }
    
    // Select the add_action you need, depending on where you want to add the menu and disable the rest:
    add_action('__header', 'display_secondary_menu', 1000, 0);   
    
    function display_secondary_menu() {
        echo ( has_nav_menu( 'secondary-menu' ) ? wp_nav_menu (
            array (
                'theme_location' => 'secondary-menu',
                'container_id'    => 'secondary-menu',
                'container_class'    => 'secondary-menu'
            )
        ).'<div class="clearall"></div>' : '' );
    }

    I have added a CSS classes as: secondary-menu
    But that doesn’t seem to do the trick anything.

    dutchy77

    @dutchy77

    btw this is from: snippet

    michelcollignon1965

    @michelcollignon1965

    been busy with the Customizr Theme for a couple of days. I’m stuck at one point that it’s not possible to see the page that is a main menu level as soon as I have linked a child or grandchild under it. As a single page only, it’s okay.
    Another them I’ve used earlier – Admired – I didn’t had any problem.

    Please help because I need to go further!

    Otherwise, a great theme so far.

    greets Michel

    WPyogi

    @wpyogi

    Forum Moderator

    @michelcollignon1965 – as I said in your other thread, you need to start your own thread –

    http://codex.wordpress.org/Forum_Welcome#Where_To_Post

    AND your question was answered here:

    http://wordpress.org/support/topic/customizr-so-far-so-good-but?replies=2

    (You should not post questions in the reviews forum, BTW)

    dutchy77

    @dutchy77

    I have got an code from: http://www.themesandco.com/snippet/adding-extra-menus-customizr/

    Add menus to CustomizrPHP

    add_action( 'init', 'register_secondary_menu' ); // this registers your menu with WP
    function register_secondary_menu() {
        if ( function_exists( 'register_nav_menu' ) ) {
            register_nav_menu( 'secondary-menu', 'Secondary Menu' );
        }
    }
    
    add_action('__header', 'display_secondary_menu', 1000, 0);     // use this to add after header
    
    function display_secondary_menu() {
        echo ( has_nav_menu( 'secondary-menu' ) ? wp_nav_menu (
            array (
                'theme_location' => 'secondary-menu',
                'container_id'    => 'secondary-menu',
                'container_class'    => 'secondary-menu'
            )
        ).'<div class="clearall"></div>' : '' );
    }

    I set up the menu with CSS classes: secondary-menu, but it doesn’t show up on the site, what am I doing wrong?

    You just created a placeholder (location) for your menu. You need to create the actual menu in Dashboard > Appearance > Menus and assign it in the secondary-menu location you have created.

    Besides, I’m under the impression that you skipped this rather important note at the bottom of the snippet:

    I do not recommend this snippet to people who are not comfortable understanding and editing PHP and CSS code at an intermediate to advanced level, as it’s not an “out-of-the-box” solution. It’s just a starter kit for people who know coding but are not yet familiar with WP functions.

    With all due respect, as of what you’ve posted so far, this snippet is way over your programming skills and chances are it will give you a lot more headaches that results.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘nav bar question’ is closed to new replies.
Skip to toolbar