Skip to main content
added 507 characters in body
Source Link
Manoj Deswal
  • 5.8k
  • 25
  • 28
  • 50

Answer to 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>
  1. 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

Answer to 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>
  1. 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;
}

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

Run upgrade/deploy/cache commands to see CSS changes

Thanks

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>
  1. 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

added 56 characters in body
Source Link
Manoj Deswal
  • 5.8k
  • 25
  • 28
  • 50

Answer to 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>
  1. 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;
}

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

Run upgrade/deploy/cache commands to see CSS changes

Thanks

Answer to 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>
  1. 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;
}

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

Thanks

Answer to 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>
  1. 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;
}

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

Run upgrade/deploy/cache commands to see CSS changes

Thanks

Source Link
Manoj Deswal
  • 5.8k
  • 25
  • 28
  • 50

Answer to 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>
  1. 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;
}

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

Thanks