Menu & Headers

Hi,

Your product is awesome btw…I just have a few requests…

1.Can I have my hamburger menu icon be on the left of my logo? And Can I use a blue background color with white bars instead of white background with a color inside?

  1. Is there a way to not show the menu on desktop but show a menu on mobile in your header?

  2. Can you adjust the margins on all my h1, h2 etc headers so there is not any default padding or margins?

Best Regards,

Peter

Hi Peter,

  1. To position the hamburger on the left, you will need to use custom CSS. Can you try adding the following, please.
@media (max-width: 767px) {
  .fl-page-nav-toggle-icon .fl-page-nav .navbar-toggle {
      left: 20px;
      right: 0;
  }
  .fl-page-nav-toggle-icon .fl-page-header-logo {
    padding-left: 40px;
  }
}
  1. If I understand you correctly, you could hide the header for non-mobile devices using the following:
@media (min-width: 768px) {
  .fl-page-header {
    display: none;
  }
}
  1. This isn’t possible out-the-box and will require custom CSS. You could try the following:
.fl-page-content h1,
.fl-page-content h2,
.fl-page-content h3,
.fl-page-content h4,
.fl-page-content h5,
.fl-page-content h6 {
  margin: 0;
  padding: 0;
}

However, some headers may have individual module styling. So to override these you will need to target the module class followed by the header tag.

Thanks,
Danny

thank you!

1 more thing…

how can I have the hamburger have a blue background with the 3 lines being white.

Best,

Peter

Hey Peter,

Can you add the snippet below inside the @media (max-width: 767px) { query from Danny’s post above and see if it works?

.fl-page-nav .navbar-toggle * {
  color: #FFF;
  background: #00F;
}

Ben