i-amdroid / material_base

Base theme for Drupal 7 & 8 inspirited by Material Design concept by Goggle
https://mb.4dd.pw/
24 stars 2 forks source link

Does not show the mobile navigation bar #2

Closed Jenderz closed 6 years ago

Jenderz commented 6 years ago

When you perform the installation and create some test pages, when you try the responsive mode it does not show the mobile navigation bar in Drupal 8.

2018-06-04-183224_1024x600_scrot

2018-06-04-183440_1024x600_scrot

Help me.

i-amdroid commented 6 years ago

Yes, it is. By default, mobile navigation doesn't create automatically. You have to do it manually. In general, you need at least 3 custom blocks:

  1. Navbar menu toggle

<div id="navbar-menu-toggle" ><a href="#"><i class="material-icons navbar-icon">menu</i></a></div>

Region: Navbar

Id is important. Also add classes like "navbar-item", "hidden-sm" to the block.

  1. Drawer close button and site or menu title
<div id="drawer-menu-close"><a href="#"><i class="material-icons drawer-icon">arrow_back</i></a></div>
<div id="drawer-title">Sections</div>

Region: Drawer

Id is important. Also add classes like "drawer-item", "divider-bottom" to the block.

  1. Place instance of you main menu to Drawer region

Don't forget to add class "drawer-item" to the block.

Also you could check docs http://mb.4dx.pw/components and examples http://mb.4dx.pw/examples

Jenderz commented 6 years ago

Thank you very much! I was perfect, but ignorance ignores. I would like to place the Header background, I have tried but I can do it. Could you help me?

i-amdroid commented 6 years ago

It is very easy. Did you tried this http://mb.4dx.pw/components#header-region ? What exactly not work?

Jenderz commented 6 years ago

This is what I did: I created a new custom block called header1. I added the code:

<div class="block">
  <img id="bg-object" src="img/header-bg.jpg">
</div>

then I added it to the region Header background. When I go to start nothing happens.

i-amdroid commented 6 years ago

Also you need to add header-bg-object class to body tag and put something to header content region.