WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] "split" menu bar (9 posts)

  1. hesselhaker
    Member
    Posted 6 months ago #

    Hi you all!

    I'm having great pleasure of your theme - volunteeringnorway.no

    I would like to "split" the navigation menu with some items left and some right - just like on http://www.themesandco.com/: "get started", "extend" and "follow" on one side and "login" on the other.

    How do I do that?

  2. hesselhaker
    Member
    Posted 6 months ago #

    Well, found this excellent thread, which should get me what i want:

    Did what user acub suggested, so also added the suggested css in my child themes' style.css.

    Activated the secondary menu, but it renders this secondary menu outside and below the navbar block (between menu block and slider).

    I would like the secondary menu to be just the same as the main menu, even on the same line, but merely floating right instead of left.

    Don't know where to start to do so. Just gave it a shot editing class-header-menu.php, adding the below code. It didn't have the desired effect. (In fact, it gave me two secondary menus, one below the navbar as before and one as an extension of the left floating main menu.) Guess there is some classes to be set, but don't know where or how.

    Anybody a bright idea? This is the site, but I have unpublished the secondary menu: http://www.volunteeringnorway.no

    //renders the right-side menu
            $menu_args = apply_filters( 'tc_menu_args',
                        array(
                          'theme_location'  => 'secondary-menu',
                          'menu_class'      => ( 'hover' == esc_attr( tc__f( '__get_option' , 'tc_menu_type' ) ) ) ? 'nav tc-hover-menu' : 'nav',
                          'fallback_cb'     => array( $this , 'tc_link_to_menu_editor' ),
                          'walker'          => TC_nav_walker::$instance,
                          'echo'            => false,
                      )
            );
            $menu_wrapper_class   = ( 'hover' == esc_attr( tc__f( '__get_option' , 'tc_menu_type' ) ) ) ? 'nav-collapse collapse tc-hover-menu-wrapper' : 'nav-collapse collapse';
            printf('<div class="%1$s">%2$s</div>',
                apply_filters( 'menu_wrapper_class', $menu_wrapper_class ),
                wp_nav_menu( $menu_args )
            );
    
            $html = ob_get_contents();
            if ($html) ob_end_clean();
            echo apply_filters( 'tc_menu_display', $html, $resp );
  3. ElectricFeet
    Member
    Posted 6 months ago #

    You need to set up a child theme and add acub's code to your own functions.php, not any of the theme's files. See this explanation.

  4. Hessel77
    Member
    Posted 6 months ago #

    Hi ElectricFeet!

    Kind of you to answer. I believe I have done as you suggested: made a new functions.php in the child (with the right path), just copied and pasted as acub described. Then added the suggested css lines to my childs' css file. I deleted the class-header-menu.php which I tampered with and had put in the child theme.

    But the basic problem remains, the right menu showing up outside and below the navbar block (between menu block and slider).

    Should I move this question to the other thread? Thanks!

  5. ElectricFeet
    Member
    Posted 6 months ago #

    So what is now in your child theme? Just style.css and functions.php?

    Could you paste your functions.php here (in backticks)?

  6. hesselhaker
    Member
    Posted 6 months ago #

    Hi ElectricFeet,

    Yes, there is just two files in the childtheme with the paths: themes/childtheme/filename

    This is the php file:

    <?php
    
    add_action( 'init', 'register_secondary_menu' );
    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);
    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>' : '' );
    }

    And this is the style.css

    /*
    Theme Name:     Customizr Child
    Theme URI:      http://themesandco.com/customizr
    Description:    A child theme for the Customizr WordPress theme. This child theme simply includes 2 files : style.css to add your custom css and functions.php where you can extend Customizr's core code. In order to keep your code as clean and flexible as possible, try to use Customizr's hooks API for your customizations. Do something awesome and have fun !
    Author:         Nicolas Guillaume (nikeo)
    Author URI:     http://themesandco.com
    Template:       customizr
    Version:        1.0.0
    */
    @import url(".../themes/customizr/style.css");
    
    .tc-header .brand {
    text-align: right;
    }
    
    #secondary-menu ul {float:right; text-align: center; list-style-type: none;}
    #secondary-menu ul li {float:right; display: inline-block; padding: 0 5px;}
    
    .navbar .nav li.join_now.btn {
    position: relative;
    bottom: 6px;
    padding: 2px;
    line-height: 19px;
    vertical-align: middle;
    }
    .navbar .nav li.join_now.btn a {
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.31);
    padding: 3px 15px;
    }
    /*The below code doesn't seem to work*/
    .navbar .nav li .menu-item-404  > a {
    float: right;}
    
    .my-no-flag > a {
        float: right;
    }
    .my-de-flag > a {
        float: left;
    }
    /*Reduce space around horizontal divider*/
    .featurette-divider {
      margin: 15px 0;
    }
    article.sticky {
    text-align:left;
    }
    footer#footer {
    text-align:center;
    }
    .footer-widgets, #textwidget, img {padding 5px 5px 5px 5px}
  7. ElectricFeet
    Member
    Posted 6 months ago #

    I've now looked into what you are doing in detail. I fear you were led astray by finding that link for secondary menus. That's a sledgehammer to crack a nut. What you are trying to do is much, much simpler.

    You simply need to find the id (e.g. 123) of the menu item that you want to shift to the right and add the following CSS:

    .navbar .nav {
      width: 100%;
    }
    #menu-item-123 {
      float: right;
    }

    That makes the menu go the whole width of the navbar and floats your individual menu item to the far right.

    You will need to remove the functions.php file and selectively remove the styles you added in style.css.

  8. hesselhaker
    Member
    Posted 6 months ago #

    That did the trick! Thanks a lot for looking into this! And sorry for the (in hindsight) somewhat ignorant question. It's good to have helpers like you in this forum!

  9. ElectricFeet
    Member
    Posted 6 months ago #

    It's good to have people who thank us too :-)

Reply

You must log in to post.

About this Theme

About this Topic