place responsive menu link on nav bar instead of moving top-left in magento-2

Question

I wanted to display the menu in the nav bar when it becomes responsive. But defaultly it gets displayed in top left with three lines. I wanted to replace this three lines with a text and also wanted to place this link on the nav bar itself.Can any on help .

thanks in advance

the default is as on left side but i want something like on left side

Answer 1

This the standard way of displaying responsive menu. However you can still put text instead of 3 lines in

vendor\magento\module-theme\view\frontend\templates\html\hea‌​der\logo.phtml

Override the file in your theme like this:

app\design\frontend\Vendor\themename\Magento_Theme\templates\html\header\logo.phtml

and edit the code like this:

<span data-action="toggle-nav" class="action nav-toggle"><span><?php /* @escapeNotVerified */ echo __('Your Text') ?></span></span>

and add this css:

 .nav-toggle {
        font-size: inherit;
    }
    .nav-toggle::before{
        content: "";
    }
    .nav-toggle > span{
          position: relative;
    }

Answer 2

Changing Three lines/bar to text

1) In your extended theme inside magento_theme module as below make some edit in logo.phtml

app/design/frontend/vendorname/themename/Magento_Theme/templates/html/header/logo.phtml

There is a line

<span data-action="toggle-nav" class="action nav-toggle"><span><?php /* @escapeNotVerified */ echo __('Toggle Nav') ?></span></span>

Write your Text at place of Toggle Nav

<span data-action="toggle-nav" class="action nav-toggle"><span><?php /* @escapeNotVerified */ echo __('Store Menu') ?></span></span>

2) CSS Updates in your _extend.less under below path

app/design/frontend/vendorname/themename/Magento_Theme/web/css/source/_extend.less

Update below classes with following styles or more as you need you can

.nav-toggle > span{
   width:auto;
   height:auto;
   clip:unset;
}
.nav-toggle{
   font-size:14px;
}
.nav-toggle::before{
   display:none;
}

Keep the menu link on nav bar

Cut the above code we changed to display text instead of three bars

<span data-action="toggle-nav" class="action nav-toggle"><span><?php /* @escapeNotVerified */ echo __('Store Menu') ?></span></span>

Paste this code to sections.phtml under this path

app/design/frontend/vendorname/themename/Magento_Theme/templates/html/sections.phtml

Now update above CSS

.nav-toggle{
   font-size:14px;
   position:relative;
   top:0;
}

I hope this will help you out, let me know if any problem

Run upgrade/deploy/cache commands to see CSS changes

Thanks