Move Responsive menu icon Centric Pro Theme

Community Forums Forums General Discussion Move Responsive menu icon Centric Pro Theme

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  braderz31 2 months, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #113268

    braderz31
    Member
    Post count: 12

    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/
    #113272

    dev
    Participant
    Post count: 457

    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.

    #113273

    braderz31
    Member
    Post count: 12

    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

    #113310

    Matt Mizwicki
    Participant
    Post count: 35

    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;
    }
    }
    
    #113369

    braderz31
    Member
    Post count: 12

    That’s great – thank you so much for your helpful response.

    Kind regards

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.