Okay
  Public Ticket #1138872
menu placement within header
Closed

Comments

  • James started the conversation

    Hi - hope you can help with this. 

    I bought the Monument Valley theme a couple of days ago (I can supply the purchase code if necessary - but couldn't see a private field on the ticket in order to do that).

    I've installed the theme with demo content at the following url: http://fill.staging.wpengine.com. I've changed the logo, and I need to adjust a few things to the header / menu in order for things to display correctly. I currently have two problems:

    1. I would like the menu (and cart icon) to be positioned lower down in the header so that it is aligned with the bottom of the logo. 
    2. If I click on a top level menu item, the sub menu item drops down and obscures the bottom part of the logo. This might be resolved when I've moved the menu down, but if not, is there a way to ensure that the top edge of the full width drop down menu is no higher than the bottom edge of the header?
    3. I've selected 'Sticky Header' in Customizer -> Theme Options -> Layout, but the header and menu disappear when I scroll down the page. How do I fix this?
    4. When viewed in responsive mode, the hamburger link opens up the menu content to cover the screen. How do I remove the dotted white box that surrounds the hamburger menu button and other circular buttons (such as the X to close the menu)?

    Thanks so much for your time. 

    James

  •  36
    Oliver replied

    Hi James,

    Here are solutions for your issues:

    1. Try to apply this custom CSS to lower down the header elements position:

      .site-header-inner > * {
      	margin-top: auto;
      }
    2. Try using this custom CSS to bring the logo forward:

      .site-branding {
      	z-index: 10;
      }
    3. Sticky header only appears when you scroll up. As stated in the customizer theme option description: "Allow header to appear when user attempt to scroll up." This behavior can be actually previewed in theme demo website too.

    4. Dotted outline is an accessibility enhancement when en item is in focus. If you want your website to be accessible, you should not remove the link/button/input field outline. It's unfortunate that browser can't render the outline in the actual shape of the element - that's why it is always rectangular. But if you really want to get rid of it, please apply this custom CSS (this will only remove the outline around the buttons in header):

      .site-header button,
      .site-header .button {
      	outline: 0;
      }

    I'm sorry but I can't check personally your website to understand what is actually needed. It only shows me the "comming soon" page. If you still require assistance with your issues, please provide access in a private reply so I can check personally.

    Best regards,

    Oliver Juhas
    WebMan Design

  •   James replied privately
  •  36
    Oliver replied

    Hi James,

    As for the accessibility resources you can check the info in theme's documentation.

    I've tested the theme demo website and you own website (thank you for login provided) on Firefox version 52.0.2 (64-bit) on both Windows (I'm on Win 10) and Mac OS (used BrowserStack.com for testing) and everything works perfectly fine for me. Maybe you are using some Firefox browser extension that causes the issue here for you?

    Best regards,

    Oliver Juhas
    WebMan Design

  •   James replied privately