Header background image & responsive menu layout

DTE_bali · January 2016

Hi.
I've got couple of things I would like your assistance with please.

I would like to place an image in the background of the logo header, as portrayed in the attached images;
Current > http://paradisoubud.com/support/01_prd_01.jpg
Desired result > http://paradisoubud.com/support/01_prd_02.jpg
What are the steps I should take in order to reach that result?
The menu currently collapse into the list icon when under 1239px width as a default responsive set up by the theme demo. How can I change it so it'll only turn into the list icon when under 767px width?

website: www.paradisoubud.com

Thanks!

Albert · January 2016

Hi,

1. This can be done with some css trick:

.header-stack.header-center #Top_bar:not(.is-sticky) .logo {
    background-image: url("#") !important;
    margin-left: -10% !important;
    width: 120%;
}

2. This can be done under Theme options > Responsive section where Responsive Menu Initial width option is.

DTE_bali · January 2016

Hi again!

part 2 solved

as for part 1, all looks great when viewed on desktop. but when it comes to mobile, the menu button seems to be on overlapping on top of the header logo and there's a bit of space on the top.
Before adding the css > http://paradisoubud.com/support/02_prd_01.jpg
After adding the css > http://paradisoubud.com/support/02_prd_02.jpg
Is it solvable?

Thanks so much

Albert · January 2016

You should use above css for desktops only because it won't be possible to do this for mobile.

DTE_bali · January 2016

is there any css or media queries I can add to disable it on mobile and show it only on desktop?

Albert · January 2016

Yes, you can wrap above css into right media query.

@media only screen and (min-width: 1240px){
    .header-stack.header-center #Top_bar:not(.is-sticky) .logo {
        background-image: url("#") !important;
        margin-left: -10% !important;
        width: 120%;
    }
}

More details a bout @media queries you can find on http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

DTE_bali · January 2016

Hi.

...That was the first thing that I've tried by myself, but it wasn't affecting anything, so I though maybe there's a different code i should've put that I wasn't aware of

Anyway, I was able to solve the menu icon issue to a tolerable state at the moment by changing the values of the "#Header a.responsive-menu-toggle" in the responsive.css.
The only thing I haven't figure out yet is how to solve the bit of space on the top when viewing on mobile, if you got any idea will love to hear.

Thanks!

Albert · January 2016

We did tested above css on our side and it works fine what means you did something wrong on your side while trying to re-paste above css.

Anyway, to remove that top padding on mobile, please use:

@media only screen and (max-width: 767px){
  #Top_bar .top_bar_left { margin-top: 0;}
  #Top_bar .logo { float:left;}
}

DTE_bali · January 2016

Great!
all solved.

Thank you

Albert · January 2016

You are welcome

Header background image & responsive menu layout

Comments