Shop Categories

X

Mobile Header

Topic Resolution: Resolved
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #13091
    isampatterson
    Participant

    Hello,

    Is there any way I can add a different header on mobile while still keeping my original header on desktop & tablet?

    For some context, I love the look of my current header on desktop and tablet, but it’s too small on mobile so I’ve redesigned it just for that device.

    Thanks,
    Sam

    #13094
    Zex
    Moderator

    Hello,isampatterson!

    There is a possibility to slightly modify the appearance of the mobile menu, only for certain screen widths, but not completely replace it for a different menu.

    What exactly would you like to change in the mobile menu?

    Maybe you should try to use the plugin for that.

    I found this plugin work nicely with our theme and has a lot configuration options:
    https://wordpress.org/plugins/mobile-menu/

    Regards

    • This reply was modified 2 years, 7 months ago by Zex.
    #13172
    isampatterson
    Participant

    Hi Zex,

    Thanks for the help with the mobile menu, but I was wondering about the mobile header.

    Thanks,
    Sam

    #13173
    isampatterson
    Participant

    Oh and one more thing on the topic of headers if I may – on desktop, is there any way to cut the blank space between the header and first piece of content?

    #13175
    Zex
    Moderator

    Hello Sam!
    If you decide to go with the plugin I suggested,
    There is the option in the plugin setting to insert your logo into the header, so they will look mostly the same as you currently have, so you don’t need to worry about that.
    (The default plugin settings have the site text only but you can change that.)

    To remove the white space, simply edit your homepage (dashboard->Pages… your home page)
    then scroll down to the bottom of the page to find the “Agama options” meta box.
    – Open the “Page” tab, and insert the “0px ” value into Page Content Padding margin-top text box.
    https://prnt.sc/nh4qir

    That should remove the white space.

    Regards

    #13177
    isampatterson
    Participant

    Thanks for your help! One more question – I’d like to display a full-screen (720px X 1080px) image-based header on mobile while keeping the same header as current on desktop and tablet. Is this possible to do?

    Here’s a link to the mobile header I’d like to upload:
    https://infinitemgmt.com/wp-content/uploads/2019/04/Header-mobile.jpg

    And here’s a link to the desktop / tablet header:
    https://infinitemgmt.com/wp-content/uploads/2019/04/Desktop-Header.jpg

    Thanks,
    Sam

    #13181
    Zex
    Moderator

    Hello, Sam!

    Try to insert the next code into Customizing->General->Additional CSS:

    @media (max-width: 600px){
    #wp-custom-header img{
        content: url(https://infinitemgmt.com/wp-content/uploads/2019/04/Header-mobile.jpg) ;  
    }
    }

    Change the max-width value per your needs.(Depending on the screen width at which you want the image to appear.)

    Regards

    #13201
    isampatterson
    Participant

    Amazing, thank you!!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.
50% OFF, Black friday & cyber monday offer. Use coupon code at checkoutthemevision50