• Resolved adriamus

    (@adriamus)


    Hey Shaped Pixels,

    I’m getting the sidebar desktop version on Chrome, but on other computers, the new Edge brwoser the mobile site comes up with the click through menu on desktop.

    Can you please help me fix?

    sealiciousfood.com

Viewing 12 replies - 1 through 12 (of 12 total)
  • Theme Author Shaped Pixels

    (@shaped-pixels)

    Thanks for the repost and the link. You’ve got good timing as I just upgraded to Windows 10 the other day, so I now have the Edge browser to test things.

    First thing I need to find out is what resolution is your viewing screen?

    The theme has a set pixel width in what is styled through media queries…break points where things change for a responsive layout. If I remember correctly, this is set so that around 1024px, the sidebar collapses and goes to the top (with the menu). This is because the sidebar would take up too much content area from that viewing width.

    I just tried your site in my browser, and it looks like it does it around that point. Were you wanting to have it go smaller before it changes to the top sidebar/menu position?

    Also, if you go to the live demo HERE using your Edge browser, does the sidebar/menu switch up to the top around the same viewing as your site?

    Thread Starter adriamus

    (@adriamus)

    Ah okay, I want it so that the menu doesn’t have a click through option and displays the menu on all platforms.

    Theme Author Shaped Pixels

    (@shaped-pixels)

    You mean a hover (mouseover) instead of a click?

    Thread Starter adriamus

    (@adriamus)

    Yeah if by that you mean the entire menu is visible the entire way.

    Theme Author Shaped Pixels

    (@shaped-pixels)

    hmmm…unfortunately the theme’s menu was coded to be a click to show submenus of a parent. As for the mobile view with the Menu button at the top, it was designed to keep the sidebar from taking up too much space with any sites that might end up with long menus (lots of links).

    Does your site (or plan to) have a small menu?

    Theme Author Shaped Pixels

    (@shaped-pixels)

    Just a quick follow up…there is a way that you can have your menu always show at the top without the mobile button, but it would require modifying a couple theme files by using a child theme at which point I can try my best to guide you through the changes you would need to make. Making such a change though would also show the menu on phones as well.

    Thread Starter adriamus

    (@adriamus)

    Yeah it’ll be a small menu. How do we go about this Child theme?

    Theme Author Shaped Pixels

    (@shaped-pixels)

    First thing is to create a child theme, based on this tutorial that WordPress has:

    https://codex.wordpress.org/Child_Themes

    One thing to note, is that when this is done, you have to activate the child theme which means any settings/options you’ve done with Seasonal, will need to be redone on the Child theme. WordPress will see the child theme as a new theme activation.

    Before you decide to do this, give me a couple hours here to see how the customization will be done (what will be the easier method) as this has never been attempted before. I will try this out and to find what is the easiest method.

    Thread Starter adriamus

    (@adriamus)

    Okay great thanks, appreciate it!

    Theme Author Shaped Pixels

    (@shaped-pixels)

    OK…here we go!
    I believe this will be easy because based on my test, we just need to override the theme’s CSS with our own custom stylesheet instead of creating a child theme.

    Step 1 – If you are not using Jetpack, install a plugin called Simple Custom CSS. This will let you create a custom stylesheet. When installed, it’s found under the Appearance admin menu. If you’re using Jetpack, you can use the Edit CSS feature that does the same thing.

    Step 2 – Copy the CSS code below into your custom stylesheet:

    @media (min-width: 320px) {
       .sidebar-inner {
       padding: 30px 20px 0;
       }
    .toggle-buttons {
       display:none;
       }
       .primary-navigation {
       display: block;
       }
       .site-navigation {
       display:block;
       margin: 30px auto;
       }
    }

    Now when your sidebar and menu floats to the top, the toggle menu button is gone and your menu will show normally.

    Thread Starter adriamus

    (@adriamus)

    Hey Thanks a ton! much appreciated. No more disappearing menu on the Edge browser!

    Theme Author Shaped Pixels

    (@shaped-pixels)

    You’re very welcome 🙂
    Worth 100 star rating? haha

    Anyway, I will assume this topic can now be set as resolved.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Menu on tablet and desktop come up as mobile’ is closed to new replies.