• 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

Executive Header Help

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 › Design Tips and Tricks › Executive Header Help

This topic is: resolved

Tagged: center header, center navigation

  • This topic has 13 replies, 3 voices, and was last updated 9 years, 8 months ago by designbytracy.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 2, 2013 at 4:48 pm #48895
    designbytracy
    Participant

    I need help with 2 things. I'm starting from the Executive theme and I can't seem to get the header to work out just right with centering and stacking.

    1. I need the widget area where I have the simple social icons to stack to 4 (essentially 25% width) when responsively the screen gets small WITHOUT moving my navigation too low.

    2. I need the navigation to center at full width. It's working correctly responsive, but not at the full width size.

    I've done quite a bit with the CSS to change up things and have a lot of negative margins and such, so I'm sure I've messed things up beyond recognition. Any tips to clean things up are welcome.

    TEST SITE
    http://www.designbytracy.com/dev/105designstudioA/


    Tracy

    Design by Tracy | Twitter | Facebook | LinkedIn

    http://www.designbytracy.com/dev/105designstudioA/
    July 3, 2013 at 11:43 am #49024
    designbytracy
    Participant

    Anyone?


    Tracy

    Design by Tracy | Twitter | Facebook | LinkedIn

    July 4, 2013 at 3:10 pm #49238
    John
    Participant

    Tracy,

    For the menu:

    
    .menu-main-navigation-container {text-align: center;}
    
    #header ul.menu {display: inline-block;}
    

    RE the social icons, I don't think you'll be able to stack them vertically without pushing the nav menu further down, but I could be wrong about that.

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    July 5, 2013 at 9:32 am #49325
    John
    Participant

    Tracy,

    Looks like my suggestions for the menu weren't complete...

    I'd do this too so that it's fully visible on smaller devices:

    
    #header {height: auto;} /* or comment out the height in line 193 */
    
    #header ul.menu {margin-top: 30px;} /* line 202 */
    
    #header .menu a {margin: 5px auto;} /* line 309 */
    

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    July 5, 2013 at 10:02 am #49330
    designbytracy
    Participant

    Thanks John. This is getting me on the right track. I have a general question. I'm a CSS newbie and use Firebug to find, test, and figure out how to fix or do the things I want. I'm wondering though...how do you figure out something like .menu-main-navigation-container when it's not already in the CSS? I'm guessing it's built into the Genesis theme or something, but I can't figure out how to find and pinpoint what it is I need if it's not showing up in Firebug or in my current CSS. Does this make sense? Thanks again for your help!


    Tracy

    Design by Tracy | Twitter | Facebook | LinkedIn

    July 5, 2013 at 10:58 am #49344
    pxforti
    Participant

    If you can't find a css rule with firebug, try searching your style.css. If it's not there, then there is no specific css rule and formatting is default. I don't think there are css rules that affect your theme in the genesis framework. In some cases, the css might be hard coded into the genesis php. You can also search the genesis folder to the rule.


    writeNowDesign
    WordPress and Ecommerce Website Design

    July 5, 2013 at 11:10 am #49348
    designbytracy
    Participant

    Yes, pxforti, that's my exact question. How do I find the default css rules if they aren't being used in my style.css? There are times when I want to change the defaults, but I have no idea what to use as the rule.


    Tracy

    Design by Tracy | Twitter | Facebook | LinkedIn

    July 5, 2013 at 11:14 am #49350
    John
    Participant

    Tracy,

    Check out this screenshot of your website in Firefox with Firebug open and the class selector underlined in red: http://db.tt/vGZNBBlm

    The HTML structure of your site is in the left pane, and the CSS is in the right pane. Just because there isn't a CSS rule in your style.css file doesn't mean there isn't a class, ID or other selector available in the HTML that you can target with CSS.

    So for your site in question, I just located the DIV that contains the menu, saw that it had a class of .menu-main-navigation-container, and created a new CSS rule for that class.

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    July 5, 2013 at 11:15 am #49351
    pxforti
    Participant

    The defaults are browser defaults. To change them, you have to write a rule.


    writeNowDesign
    WordPress and Ecommerce Website Design

    July 5, 2013 at 11:19 am #49353
    designbytracy
    Participant

    Ok, I think I'm getting it now. I think I was automatically skipping over any of those selectors that didn't show any rules. Now I understand they are still being used and just pulling from browser defaults and I need to isolate them and write my own rules to add to my CSS.

    THANK YOU both. Hopefuly now I can work some more to get this site right!


    Tracy

    Design by Tracy | Twitter | Facebook | LinkedIn

    July 5, 2013 at 11:23 am #49354
    pxforti
    Participant

    I think you already figured it out. John's screen shot shows the nav div and it's id/class.

    If I want a header id or class, I right click in chrome and select Inspect Element. It takes me to that element or close to it. Then I can find its class or id. If there is no class, you can use it's container; eg, #header .wrap


    writeNowDesign
    WordPress and Ecommerce Website Design

    July 5, 2013 at 11:30 am #49356
    John
    Participant

    Now you're talking! The HTML has lots of selectors that never actually get used by the CSS, but they are there and available if you need them.

    So in this case, the class .menu-main-navigation-container did exist and does exist in the HTML. You didn't create the class when you added it to your CSS - you only targeted what was already there and then added a rule to style the class. CSS doesn't create selectors (classes, IDs, or otherwise), it can only target them.

    RE browser defaults, they are there and they're different for every browser, unfortunately, but they are pretty much irrelevant to this particular question / topic.

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    July 5, 2013 at 2:38 pm #49399
    designbytracy
    Participant

    Got it, thanks!


    Tracy

    Design by Tracy | Twitter | Facebook | LinkedIn

    July 23, 2013 at 12:58 pm #52118
    designbytracy
    Participant

    Just came back to document how I fixed the simple social icons to center under my logo for smaller screen sizes. In the responsive section of my CSS, I used:

    	.simple-social-icons {
    		display: block;
    		float: none !important;
    		height: 100% !important;
    		margin-left: auto;
    		margin-right: auto;
    		width: 175px !important;
    	}
    
    	.simple-social-icons ul.alignright {
    		float: none;
        		text-align: center !important;
    	}

    Tracy

    Design by Tracy | Twitter | Facebook | LinkedIn

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Executive Header Help’ is closed to new 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