Mega menu scss styles

Arkadiusz Idzikowski staff commented 4 years ago

Did you copy the styles from the SCSS tab to your global styles.scss file?

mardem commented 4 years ago

It doesn't resolve the problem.

Arkadiusz Idzikowski staff commented 4 years ago

We need more information about used HTML/Ts/Scss code (and how it is used, especially scss styles) to reproduce this problem on our end.

mardem commented 4 years ago

HTML file:

{{ 'HOME.about' | translate}} {{ 'HOME.shop' | translate}} Laptops Phones Lifestyle Technology Design Featured

<ul class="navbar-nav nav-flex-icons ml-auto">
  <li class="nav-item">
    <a class="nav-link" href="/logowanie">{{ 'HOME.login' | translate}}</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/rejestracja">{{ 'HOME.signIn' | translate}}</a>
  </li>
</ul>

<!-- Search form -->
<form class="form-inline" #searchForm="ngForm" (ngSubmit)="onSubmit()">
  <div class="md-form my-0">
    <input class="form-control mr-sm-2" type="text" placeholder="{{ 'HOME.search' | translate}}" aria-label="Search">
  </div>
</form>

<!-- Links -->
<ul class="navbar-nav nav-flex-icons ml-auto">
  <li class="nav-item">
    <a class="nav-link" href="#">
      <mdb-icon fas icon="envelope" aria-hidden="true"></mdb-icon>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <mdb-icon fas icon="home" aria-hidden="true"></mdb-icon>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <mdb-icon fab icon="facebook-f" aria-hidden="true"></mdb-icon>
    </a>
  </li>
</ul>
<!-- Links -->

TS file: import { Component, OnInit } from '@angular/core';

@Component({ selector: 'app-footer', templateUrl: './footer.component.html', styleUrls: ['./footer.component.scss'] }) export class FooterComponent implements OnInit {

constructor() { }

ngOnInit(): void { }

}

Scss file: .navbar .mega-dropdown { position: static !important; }

.navbar .dropdown-menu.mega-menu { width: 100%; border: none; border-radius: 0; }

.navbar .dropdown-menu.mega-menu a { padding: 0 0 0 0; }

.navbar .dropdown-menu.mega-menu a.news-title { font-weight: 500; font-size: 1.1rem; line-height: 1.5; -webkit-transition: .2s; transition: .2s; color: #4f4f4f !important; }

.navbar .dropdown-menu.mega-menu a.news-title:hover { color: #2196f3 !important; }

.navbar .dropdown-menu.mega-menu a.news-title.smaller { font-weight: 400; font-size: 1rem; line-height: 1.4; }

.navbar .dropdown-menu.mega-menu .sub-menu a.menu-item { color: #4f4f4f !important; }

.navbar .dropdown-menu.mega-menu .sub-menu a.menu-item:hover { color: #4f4f4f !important; }

.navbar .dropdown-menu.mega-menu .news-single { margin-bottom: 1.2rem; border-bottom: 1px solid #e0e0e0; }

.navbar .dropdown-menu.mega-menu .sub-title { padding-bottom: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid #e0e0e0; }

.navbar .dropdown-menu.mega-menu .p-sm { padding-bottom: 0; }

.navbar .dropdown-menu.mega-menu .m-sm { margin-bottom: -5px; font-size: 0.85rem; color: #2196f3 !important; }

.navbar .dropdown-menu.mega-menu .m-sm:hover { color: #2196f3 !important; }

.navbar .dropdown-menu.mega-menu .mt-sm { margin-top: -3px; }

.navbar .dropdown-menu.mega-menu .font-small { font-size: 0.85rem; }

Arkadiusz Idzikowski staff commented 4 years ago

Please add your code to the first post and use our code formatting. The code you provided has broken formatting and is unreadable.

We tested mega menu on this example from the documentation and it works correctly on our end: https://mdbootstrap.com/docs/angular/navigation/mega-menu/#v-2.

Please make sure to copy all the HTML/TS/Scss code (scss should be added to the styles.scss file).

mardem commented 4 years ago

I've prepared mega menu one more time. Now I change a little bit my way of working. I copy and paste code from MDB without any changes and then I am introducing customization. After this it works correctly.

One more question, is it possible to make mega menu wider? I have more link in the first bar and it looks ugly .

Arkadiusz Idzikowski staff commented 4 years ago

It should have 100% width by default. Can you provide more details about this problem?

mardem commented 4 years ago

I want edit my post and add code with your code editor but there is problem because formatter cut the code off. I can't also add picture with the problem. You can see it on the first picture, menu isn't from left to right, there are white places on both sides. Therefore all header space is not used.

Arkadiusz Idzikowski staff commented 4 years ago

If you want to remove the margins and paddings on the left and right side you would need to modify the HTML code of the example. As you can see, the first 'div' with class 'sub-menu' has class 'pl-4', and it's child element 'ul' has class 'mx-4'. After removing these classes, the content will be moved to the left border of the mega menu. The 'div' on the right has 'pr-5' class which is responsible for adding right padding.