- This topic has 13 replies, 3 voices, and was last updated 9 years, 8 months ago by
.
-
Posts
-
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/Tracy
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 😉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 😉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
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 DesignYes, 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
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 😉The defaults are browser defaults. To change them, you have to write a rule.
writeNowDesign
WordPress and Ecommerce Website DesignOk, 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
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 DesignNow 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 😉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
- The topic ‘Executive Header Help’ is closed to new replies.