Executive Header Help

Community Forums Forums Design Tips and Tricks Executive Header Help

This topic is: resolved

This topic contains 13 replies, has 3 voices, and was last updated by  designbytracy 1 year, 1 month ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #48895

    designbytracy
    Participant
    Post count: 51

    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/


    http://www.designbytracy.com/dev/105designstudioA/
    #49024

    designbytracy
    Participant
    Post count: 51
    #49238

    John
    Participant
    Post count: 157

    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 ;)

    #49325

    John
    Participant
    Post count: 157

    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 ;)

    #49330

    designbytracy
    Participant
    Post count: 51

    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!


    #49344

    pxforti
    Participant
    Post count: 68

    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

    #49348

    designbytracy
    Participant
    Post count: 51

    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.


    #49350

    John
    Participant
    Post count: 157

    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 ;)

    #49351

    pxforti
    Participant
    Post count: 68

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


    writeNowDesign
    WordPress and Ecommerce Website Design

    #49353

    designbytracy
    Participant
    Post count: 51

    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!


    #49354

    pxforti
    Participant
    Post count: 68

    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

    #49356

    John
    Participant
    Post count: 157

    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 ;)

    #49399

    designbytracy
    Participant
    Post count: 51

    Got it, thanks!


    #52118

    designbytracy
    Participant
    Post count: 51

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

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

The topic ‘Executive Header Help’ is closed to new replies.