Support » Theme: Customizr » navbar-wrapper size and additional top menu

  • Resolved malissas

    (@malissas)


    Hi,

    I want to change the navbar wrapper size to span 6. I have found that in wp-content/themes/customizr/parts/class-header-header_main.php
    ‘<div class=”navbar-wrapper clearfix span6″>’
    How do I change it in the child theme? Do I have to copy the whole page?
    ALSO
    How do I include an additional horizontal menu directly inbetween the header and the body?

    Thanks,
    M

Viewing 10 replies - 1 through 10 (of 10 total)
  • For changing the width of the menu add the following code to the Custom CSS box of this theme

    .row-fluid .span9 {
      width: 74.359%;
    }

    change this width to your preferred value.

    As for an additional menu, create a child theme, create functions.php file inside wp-content/customizr-child/ and place the following code

    <?php
    register_nav_menu( 'custom-horizontal', 'Custom Horizontal Menu' );
    add_action('__after_header','custom_menu');
    function custom_menu()
    {
    wp_nav_menu( array ('theme_location' => 'custom-horizontal') );
    }

    The closing PHP tag ?> was purposely omitted. Then go to Appearance > Menus > Menu Location tab and select a menu for the Custom Horizontal Menu location.

    Customize the menu’s look using CSS.

    Additional Reading
    http://codex.wordpress.org/Function_Reference/wp_nav_menu

    Thread Starter malissas

    (@malissas)

    Thanks Jesin!

    Does changing the .span9 in css like that defeat the purpose of the spanned events in bootstrap? I don’t mind doing it, it works, I was just wondering.

    The second nav – awesome, had no idea it could be done so ‘modularly’. Except it has opened up a new can of worms. The nav is in normal list format rather than the delicious horizontal dropdown, do I style it up in functions.php as well? Where would I give it a class? I’m trying to find code of something similar so I can work it out but haven’t yet found anything close to what I want to do.

    Thanks if you can help.

    If you could post your site’s URL I can suggest the CSS code to use to style that menu.

    Thread Starter malissas

    (@malissas)

    The WP site is http://www.solarvac.com.au/new/ The custom menu I want is currently on the left sidebar on the product pages. (I turned off the custom menu under the header).
    Here is a page I did using bootstrap, without wp http://www.solarvac.com.au/ I would like the same dropdown menu, that is in the blue bar with the phone number.
    Thank you !

    Here is the CSS code

    #menu-allmenu {
        display: block;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0 10px 0 0;
        position: relative;
    }
    .menu-allmenu-container {
        background-color: #152440;
        background-image: linear-gradient(to bottom, #1A2D4F, #0D1729);
        background-repeat: repeat-x;
        border: 1px solid #000000;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        min-height: 40px;
        overflow: visible;
        padding: 0 20px;
    }
    #menu-allmenu > li {
        float: left;
    }
    #menu-allmenu > li > a {
        color: #FFFFFF;
        display: block;
        float: none;
        padding: 10px 15px;
        text-decoration: none;
        text-shadow: 0 1px 0 #1A2D4F;
    }
    .sub-menu {
        display: none;
    }
    .tc-header {
        border-bottom: medium none;
    }

    This code will work display the menu in a style similar to the one at http://www.solarvac.com.au/ only if this custom menu is placed after the </header> and before <div id="main-wrapper" class="container"> so you have to hook in to the __before_main_wrapper action

    add_action('__before_main_wrapper','custom_menu');
    function custom_menu()
    {
    //Call the menu function here
    }

    Also I have hidden .sub-menu as your page example page doesn’t have those.

    Thread Starter malissas

    (@malissas)

    Thank you again Jesin. With your help it is coming along nicely!
    I am so grateful for your assistance 🙂

    You’re welcome malissas.

    Don’t forget that those menus contain submenus which are hidden using CSS. If you don’t wish to have them just remove it.

    Else have something like

    #menu-allmenu > li:hover .sub-menu {
        //code to style and display submenu
    }

    For changing the width of the menu add the following code to the Custom CSS box of this theme

    .row-fluid .span9 {
      width: 74.359%;
    }

    change this width to your preferred value.

    @malissas is right, you shouldn’t modify the sizes of the spans like this. It will throw out the responsiveness and layout of the whole site, which is heavily based on the very precise percentages for the spans.

    @electricfeet what is the right way of changing it?

    Hehe. Good question! But I’ve never applied myself to the header (and unfortunately don’t have time to for a few weeks now). But I have applied myself to the underlying structure of the spans and changing them is likely to break stuff.

    Sorry I can’t be more helpful. Point taken! 🙂

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘navbar-wrapper size and additional top menu’ is closed to new replies.