Support » Theme: Customizr » Collapsed navigation menu

  • Resolved Alfred



    Is there a way to change the look of the collapsed navigation menu. I do not want that to be displayed as a button when the size is re-sized or when viewed on a smaller device but would like that to be displayed like the original navigation menu and obviously lesser size and responsive as well.

    I tried locating the CSS code for navbar-inner and btn-navbar (which are the DIV classes) on the Header menu but unable to.

    Please help.


Viewing 10 replies - 1 through 10 (of 10 total)
  • Have to ask why you’d want to do that? The resulting text on a smartphone, for example, would be impossible to read.

    The 3-bar menu is a Twitter Bootstrap feature and recognised throughout the community as the standard way of showing responsive menus.

    I was just wondering how many would know that there is a navigation menu there (The basic users I mean) when viewing on a smaller screen.

    Is there no other way of displaying this, may be one below the other etc and a fly out menu for anything that has a sub menu.


    Credit to @totalbeginner earlier in the Forum:

    Theres quite an easy solution:

    Edit class-header-menu.php:

    <button type=”button” class=”btn btn-navbar” data-toggle=”collapse” data-target=”.nav-collapse”>
    <span icon-bar></span>
    <span icon-bar></span>
    <span icon-bar></span>

    delete the 3 spans and you delete the 3 rows.
    Type “menu” instead and you have the text menu on the button.

    Adding my usual blurb:

    Recommend you do this in a Child Theme.
    The process you need is:
    Move the core file
    FROM: customizr/parts
    TO: customizr-CHILD/parts
    using the same name.
    Make the above changes in the CHILD version.

    This way, when customizr is updated, you will keep your changes. You will need to check whether Nic has made any changes in that file in the new release. If so, you’ll need to repeat the process in the updated file.

    Here’s an alternate method. I wanted the word “Menu” to appear to the right of the three horizontal lines on the compressed menu and this accomplishes that without requiring modification to anything but your custom.css:

    .btn-navbar {
    	width: 90px;
    	height: 30px;
    	vertical-align: top;
    .btn-navbar:after {
    	content: "Menu";
    	float: right;
    	margin: -16px 0 0 0;

    Hope this is helpful.


    Neat solution, thanks. Might need to adjust smallest viewports.


    J’utilise votre thème customizr pour réaliser un site web mais je suis bloquée au niveau du référencement! en effet, je ne comprend pas comment je peux avoir accés aux “méta Name : description et keywords?
    Dans l’attente de votre réponse, recevez mes cordiales salutations.
    p.s: Super votre thème 🙂

    I use your theme customizr to make a website but I’m stuck at SEO! In fact, I do not understand how I can have access to the “meta Name: description and keywords?
    Waiting for your answer, receive my cordial greetings.
    p.s nice your theme 🙂


    The best solution would be to use a plugin called ‘All in one SEO’, it allows you to use specific key words, meta tags for each pages. Sure that would help. Any questions, please post back,I would reckon opening a new post or check if there is an existing one specific to SEO.

    I will mark this post as resolved as the info about the menu bar is clear.
    Thanks for the ones who helped.



    @jrisberg is there a way to make it shows current menu item instead of “Menu” word?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Collapsed navigation menu’ is closed to new replies.