• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Move Responsive menu icon Centric Pro Theme

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: centric pro, mobile menu

  • This topic has 4 replies, 3 voices, and was last updated 9 years, 5 months ago by braderz31.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 7, 2014 at 3:15 pm #113268
    braderz31
    Member

    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/
    July 7, 2014 at 3:42 pm #113272
    dev
    Participant

    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.

    July 7, 2014 at 3:51 pm #113273
    braderz31
    Member

    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

    July 7, 2014 at 9:18 pm #113310
    Matt Mizwicki
    Member

    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;
    }
    }
    
    July 8, 2014 at 6:51 am #113369
    braderz31
    Member

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

    Kind regards

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble