WordPress.org

Support

Support » Themes and Templates » [Resolved] Collapsed navigation menu

[Resolved] Collapsed navigation menu

  • Alfred
    Member

    @alfredhd

    Hi

    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.


    Alfred

Viewing 10 replies - 1 through 10 (of 10 total)
  • rdellconsulting
    Participant

    @rdellconsulting

    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.

    Alfred
    Member

    @alfredhd

    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.

    Thanks

    rdellconsulting
    Participant

    @rdellconsulting

    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>
    </button>

    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.

    jrisberg
    Member

    @jrisberg

    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.

    Joel

    rdellconsulting
    Participant

    @rdellconsulting

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

    ElectricFeet
    Participant

    @electricfeet

    Cute!

    chouchou
    Member

    @robette

    Bonjour,
    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.
    Nina
    p.s: Super votre thème 🙂

    chouchou
    Member

    @robette

    Hello,
    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.
    Nina
    p.s nice your theme 🙂

    Alfred
    Member

    @alfredhd

    Hi

    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 ‘[Resolved] Collapsed navigation menu’ is closed to new replies.