1

enter image description hereI 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

enter image description here the default is as on left side but i want something like on left side

  • the three lines displayed in top left is called hamburger menu. 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\header\logo.phtml(you need to override this file in custom theme/module) and add/remove some css – Sejal Shah Jul 10 '17 at 9:44
  • can U explain how should I do.. I am just a beginner – learner Jul 10 '17 at 9:47
  • 1
    I have answered how to change three lines to text, please wait for the 2nd answer " keeping the link on nav bar itself" till try first one . thanks – Manoj Deswal Jul 10 '17 at 10:35
  • Check updated answer to keeping the link on nav bar itself. Thanks – Manoj Deswal Jul 10 '17 at 11:31
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;
    }
3

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

  • menu appears..! but clicking on menu does not show any action? pop up is not working.. why?? – learner Jul 11 '17 at 3:47
  • why are we putting the code on section.phtml?? – learner Jul 11 '17 at 3:48
  • please share your site URL to investigate the issue . Thanks – Manoj Deswal Jul 11 '17 at 3:49
  • 1
    Nav bar lies in "sections container" so to place menu link in nav bar we place it sections. By defaults it comes in "header content " container – Manoj Deswal Jul 11 '17 at 4:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.