Wu Wei perplexions: fixed-position menu: width 100%; Footer: width 100%;
-
Greetings,
1. Seeking to have http://sugarcube.us visually capped with the current navigation bar color and corresponding bottom-border dashed border. –Meaning, I’d like the fixed position .menu-main extend left and right 100% while maintaining .full-column positioning. (I’ve tried coding menu-main width 100% but the extension only goes to the right but not the left. I figure it must be connected to the full-column and/or center-column code somehow making this effort seemingly more complex than originally thought)
Original: The original Wu Wei code shows a horizontal rule under the nav bar but that is much different coding.
Note: In the end I hope the mobile FULL version will keep the navigation bar from drifting left or right when magnification is used to view the site.
2. Seeking to have http://sugarcube.us visually grounded with the footer background color extending left and right 100%. I’d like to have the color field extend no matter the browser window size. This would then visually reflect the fixed-position Nav Bar discussed in the previous question.
The wordpress.com Wu Wei credits at the bottom would be unaffected, keeping its current full-column position.
Thank you.
The blog I need help with is: (visible only to logged in users)
-
I’d like the fixed position .menu-main extend left and right 100% while maintaining .full-column positioning.
First, I couldn’t find the menu when I first looked… because it’s stuck behind the main menu bar when logged in, this will fix that:
.logged-in .menu-main { top: 28px; }Note that using fixed or absolute positioning pulls the element outside of the normal document flow, so you can’t technically maintain .full-column positioning, but you can mimic it.
In your .main-menu block, try changing the width to 100% and keep in mind you set it to used fixed positioning, so you have to add left:0; if you want that container to start at the very left.
To move the menu list container (the block just inside .menu-main) back to the center where it was before, change text-align to center in the .menu-main block and add this:
.menu-main ul { display: inline-block; width: 67.5em; } -
.logged-in works perfectly!
.menu-main ul moves the menu list container to the center but the vertical drop downs get scrambled in a horizontal fashion.
-
Seeking to have http://sugarcube.us visually grounded with the footer background color extending left and right 100%.
For this one, there aren’t enough container elements to use the same method we did for #1, but you can kind of get around it. Here is an example I came up with you can use to get started:
#footer { background: #eee; left: 0; position: absolute; width: 100%; } #footer .credits, #footer .bottom-link { display: block; float: none; margin: 0 auto; width: 67.5em; text-align: center; padding-bottom: 1em; }Do keep in mind that this example does take into account some of your already existing #footer custom CSS, and you may need to combine this in and you’ll probably want to adjust some of the previous CSS you added as well (like the really big top padding on #footer).
-
.menu-main ul moves the menu list container to the center but the vertical drop downs get scrambled in a horizontal fashion.
It looks like “.menu-main ul ul” is inheriting the new width we added for “.menu-main ul” in the first example above. Try setting a width for “.menu-main ul ul” to get the submenus back into shape.
-
So far so good with the menu and submenus. Thanks!
Wrapping my head around the footer-widgets 100% width to reflect the 100% menu width. I tried a few times based on the basic code you provided but with limited scrambled results. I’ll try again in the morning.
-
My foot-widgets are now in a field of blue width: 100%; left: 0; with some padding and top margin.
I’ve tried to center the 3 footer-widgets to align with the center-column. no luck. Almost there…
-
Wrapping my head around the footer-widgets 100% width to reflect the 100% menu width.
Earlier you just said footer, and I was thinking of the one line of text just in #footer, not the widgets (though I guess you could consider those part of the footer). :)
You actually can use a similar method to the one used for the main menu. You need two container elements right in a row to do it. Here’s an example focusing on the footer widget area and not just the footer that’s below those:
.center-column-sidebar { background: #1B84E0; position: absolute; left: 0; width: 100%; text-align: center; } #footer-widgets, #footer { display: inline-block; width: 58.334em; text-align: left; } #footer-widgets .widget-area { margin-right: 0; width: 33%; }Note: you’ll still need to adjust #footer separately.
-
I had to strip out my #footer custom css and use the original code plus the mods you kindly provided, and some tweaking, otherwise it was a mess. I like the wp credits floating left since it works well with the flush right WP Follow button. All works well now. What do you think from your end?
One more thing… Please verify from your end Angie is present. During my tests on different browsers she went missing. She may be hiding, if that’s possible, under the new #footer-widgets and/or the #footer design. –I hope that’s not a problem with registering stats.
-
-
and sadly lost the mobile version. No longer does it load automatically nor an option to view it.
-
What do you think from your end?
I like it!
One more thing… Please verify from your end Angie is present.
Not sure what you’re referring to, can you screenshot it?
http://en.support.wordpress.com/make-a-screenshot/I lost the OLDER POST button on the Front page.
That’s happening because of the footer absolute positioning. Try adding this
margin-top: 6em;to the .center-column-sidebar block.
and sadly lost the mobile version
You have “Enable mobile theme” checked on the Appearance → Mobile, so you should see the mobile theme for http://sugarcube.us/ when you first load it.
If you’re trying to get back to the default mobile version of the Wu Wei theme (which is separate from the Appearance → Mobile theme), you should uncheck the “Include this CSS in the Mobile Theme” option in your Appearance → Themes → Customize → CSS panel.
-
Yes! :)
Angie is the Smiley Face’s name so I’ve learned. You know, the smiley face wp uses for stats. Well, SHE’s back! She was hiding under the #footer-widgets. When I added ‘margin-top’ as you suggested the footer-widgets moved downwards to reveal both the Older Post button and Angie the Smiley Face.
When viewing the full site on a mobile devise the View Mobile Site option is now visible as a result. With the Custom CSS mobile option unchecked and the standard Appearance > Mobile Theme selected the original Wu Wei mobile version now works perfectly.
Side note: I wish the Wu Wei Theme would include a sizable button like the one used for Older Posts for selecting the “View Mobile Site” and vice versa. The interface could be more user friendly for those with vision problems.
Thank you so much designsimply for seeing me through the ins and outs of CSS coding. Its been a great conceptual journey ending with a simply clean site based on the Wu Wei Theme.
-
-
@sugarcubeus, ha! I didn’t know that about the smiley. Also, you should blog about your Wu Wei customization experience. :)
- The topic ‘Wu Wei perplexions: fixed-position menu: width 100%; Footer: width 100%;’ is closed to new replies.
WordPress.com Forums 