Move Responsive menu icon Centric Pro Theme

[braderz31]

Hi there

I'd like to move the navigation menu icon in mobile responsive mode.

By default, when Centric Pro is viewed on a mobile device, the menu icon is positioned directly below the header. I have been able to reduce the width of the widget area that the menu sits within so that the icon now sits along side the header title.

Unfortunately, by doing this I've also reduced the width of the menu items when the menu is being viewed.

Anyone have any ideas on how to have the menu icon sitting next to the header title but maintain the full width when the menu is extended.

Hope this makes sense

Thanks

Brad

http://108.174.152.251/~pink/

[dev]

Learn how to write a media query in your CSS file to adjust the width of the menu area on small device screens. It is not that difficult.

[braderz31]

I have already written a media query to move the menu to where it is now...

Perhaps I wasn't clear enough in my previous post... I'm asking for advice on what further CSS I need to write in order to achieve what I've explained above

[Matt Mizwicki]

This is the media query that is causing the problem...You'll need to remove the width.
It's causing the entire widget area to be 50px, rather than just the menu icon.

@media only screen and (max-width: 1023px){
.header-widget-area {
width: 50px !important; 
}
}

You could remove the above and add something like this and it should at least get you started down the right path (there's more then one way to accomplish what you want i think)....

@media only screen and (max-width: 1023px) {
.header-widget-area {
position: absolute;
top: 0;
right: 0;
background: transparent;
}

nav.nav-header ul li {
background-color: #444;
}
}

[braderz31]

That's great - thank you so much for your helpful response.

Kind regards

[Author]

Posts