WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
nav bar question (15 posts)

  1. dutchy77
    Member
    Posted 9 months ago #

    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?

  2. rdellconsulting
    Member
    Posted 9 months ago #

    This Snippet will fix your grey bar.

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

  3. dutchy77
    Member
    Posted 9 months ago #

    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.]

  4. rdellconsulting
    Member
    Posted 9 months ago #

    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.

  5. rdellconsulting
    Member
    Posted 9 months ago #

    Here's the Codex Menu section.

  6. dutchy77
    Member
    Posted 9 months ago #

    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;
    }

  7. rdellconsulting
    Member
    Posted 9 months ago #

    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.

  8. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

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

  9. Andrew
    Forum Moderator
    Posted 9 months ago #

  10. dutchy77
    Member
    Posted 9 months ago #

    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.

  11. dutchy77
    Member
    Posted 9 months ago #

    btw this is from: snippet

  12. michelcollignon1965
    Member
    Posted 9 months ago #

    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

  13. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    @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)

  14. dutchy77
    Member
    Posted 9 months ago #

    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?

  15. acub
    Member
    Posted 9 months ago #

    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.

Reply

You must log in to post.

About this Theme

About this Topic

Tags