"split" menu bar

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: https://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 );

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.

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!

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

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

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:      https://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:     https://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}

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.

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!

It’s good to have people who thank us too ??