Header Menu Mobile Display – Modern Portfolio

[radiantaction]

Hi,
I'm using the Modern Portfolio theme with a logo on left, custom menu in header widget.

On desktop all is fine. On mobile, the header widget pushes into and over the header.
I had to change the width of the header to 100% so the header didn't get so small on mobile. Perhaps this was the wrong way to address this.

My practice site where you can see this is: http://dev.kirstenhopedesign.com

What I'm trying to achieve is this:
Header as is on left, custom menu on right.
When resizing to smaller screens, the logo fills the full width of the site container (this is currently okay) AND
The header widget drops below the logo (preferably as the menu, not the hamburger icon but that's not a deal breaker).

Can someone tell me either what I'm doing wrong or what I need to change?

Thank you so much

http://htttp://dev.kirstenhopedesign.com

[WisdmLabs]

Hi,

There is a negative margin on .site-header .widget of -55px
remove this.

Align the elements using this css

.title-area{
width:40%;
}

and make it full width in mobile using media queries

@media (max-width:600px){
.title-area{
width:100%;
}
}

---

http://wisdmlabs.com/

[radiantaction]

Thank you for your help. Unfortunately this didn't solve the problem.

site: http://dev.kirstenhopedesign.com

What I want is for the header to resize and stay intact on landscape mobile.
For example:
On desktop the logo is on the left, header nav on right.

On mobile landscape I want it to display as above. What is happenining instead is the menu items wrap and overlap the header.

On mobile portrait I want the logo to be full width and the header widget nav to fall underneath the logo.

I've tried adding clear: both to the media queries and that didn't work (although perhaps I wasn't targeting the correct element?).

Can anyone help with this? It's driving me crazy that I can't figure this out.

Warmly,
Kirstne

[Author]

Posts