Menu Bar and Header Image

Blaskan
1

Hi!

I am trying to change two things with the theme - is there an easy way to add a different header image for mobile? My header is not responsive so I originally added the custom CSS

/resize heading/
@media (max-width: 650px){
.custom-header {
background-size: contain;
height:100px !important;
}
}

Which worked, but I decided it would be easier to change the image completely between regular to mobile, any easy ways to do this?

Also I want to change the mobile menu bar:
currently the menu moves to the responsive form as seen in the first attached image, is there a way to change it where it isn’t responsive and it moves to two lines where the menu items are split up but still visible as seen in the second image?

Thanks for your help!

2

Hello there,

I hope you are doing well today.

We can edit the header to use another image but you need to add the image url into the code.
You can use the following CSS code by going to Appearance > Customize > Additional CSS and pasting it there.

/*resize heading*/ @media (max-width: 650px){ .custom-header { background-size: contain; height:100px !important; content: url(image.jpg); } }

So with this you change the image.jpg to the image URL which can be found when you view the image in the Media Library.

As for the menu changes, Could you please provide a link to your website so that I can inspect it and provide a solution?

Best Regards,
Support

3

Thank you for the response! I was lucky enough to fix the header image issue with a little google searching.

Site: www.blog.frankcusimano.com

The two things I have questions on are:
1.how do I turn off the hamburger menu when the screen is on mobile or shrinks to a certain size (see above images from the post above.

2.how do I force desktop mode on mobile? Yesterday I started directing to the site from Instagram and I found out it defaults to a funny mobile form. Not sure why. Attached are the images. I prefer it look like the desktop form in the first image, not the blue mobile form.

4

Hello there,

  1. This CSS should prevent the mobile menu from appearing:

/*Remove mobile menu*/
@media all and (max-width: 769px)
.menu-toggle {
    display: none;
}

That is a mobile theme from Jetpack, go to Jetpack -> Settings -> Writing tab and scroll down to the Theme Enhancements and the “Enable the Jetpack Mobile theme” option and turn that OFF.

Best Regards,
Support

5

Hi there!

Thank you so much for the help with the jetpack settings.

As for the mobile menu - display: none - removes the menu all together. I was hoping to still have the default menu but that would be split up in two lines as seen in the attached image.

Thanks again for your help and support.

6

Hey there,

I hope you are well today and thank you for your question.

For design purposes, I suggest keeping the mobile menu as it may affect the overall layout of the theme on mobile devices.

Best regards,
Support.

7

Hi support,

  1. I want to change menu bar text colour particularly for blog pages
  2. I want to add image which will best fits into header of the blog page.
8

Hi @ketanbhagwat

This is your third reply to the same question,
please open your ticket or wait for the answer in one of the ticket, and please don’t create duplications
this ticket is closed