ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• December 23, 2015 at 12:34 am #237156
  marktuschman

  Member

  Post count: 6

  We’re using Menu 3 with the logo on left, menu in the middle with 8 menu items, and social media icons on the right side of header. When the browser is resized, the “Home” page menu item will be overlaid by the logo on the left side. In addition, at a specific resize point, the right-most menu item, “Contact”, will wrap and overlay the image below the header. What can I do to prevent these cosmetic annoyances from occurring?

  December 23, 2015 at 6:46 am #237168
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  .full-center .float-menu{
  width:80% !important;
  }

  Thanks
  Mohammad

  December 23, 2015 at 8:49 pm #237296
  marktuschman

  Member

  Post count: 6

  Thank you Mohammad. Your solution solved one problem which is the left-most menu item being overlaid by the logo on the left side of the header. However, it does not solve the following: as the size of the browser is reduced, the right-most menu items begin to wrap around onto the image below the header. Also, the logo on the left side of the header at some point gets squeezed out of the header and appears on the image below the header. Here are a couple of those specific breaking points:

  • At 980 x 1280: right-most menu item wraps and appears over the image below the header.
  • at 800 x 1280: the 3 right-most menu items wrap to overlay the image below the header and the logo appears over the image below the header.

  Is there css code that addresses various responsive browser sizes that I can use to, at various sizes, customize the appearance of the logo and menu items in the header?

  Thank you, Joel

  December 24, 2015 at 6:49 am #237316
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please attach screenshot to get your issue exactly.
  Thanks
  Mohammad

  December 25, 2015 at 1:57 am #237361
  marktuschman

  Member

  Post count: 6

  Please see two images: Atelier_Normal_Menu.png showing the normal menu the say it should appear, and Atelier_Issues.png showing how the Logo and right-most menu choices in the header appear over the image below the header when the browser is resized to a smaller length/width.

  Attachments:

  You must be logged in to view attached files.
  December 25, 2015 at 9:47 am #237373
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  @media only screen and (max-width: 991px) {
  .full-center #logo{
  height:42px !important;
  }
  .full-center .float-menu {
  width: 100% !important;
  }
  .full-center nav.float-alt-menu ul.menu > li > a, .full-center #header nav.std-menu ul.menu > li > a {
  display: block;
  padding: 0px 6px !important;
  font-size: 12px!important;
  }
  }

  Thanks
  Mohammad

  December 26, 2015 at 1:08 am #237387
  marktuschman

  Member

  Post count: 6

  Mohammed, thank you, thank you…that works great!!

  December 29, 2015 at 12:31 pm #237520
  David Martin – Support

  Moderator

  Post count: 20834

  Thanks Mohammad! Glad that helped you.

  Thanks.

• Back to forum

  Posted in: Atelier