Community Forums › Forums › Archived Forums › Design Tips and Tricks › Genesis Utility Bar Above Header Small Fixes…
- This topic has 5 replies, 2 voices, and was last updated 8 years, 4 months ago by Vasilis.
-
AuthorPosts
-
December 5, 2015 at 5:46 am #172816VasilisMember
Hey awesome people.
Quick question here...
I recently added a utility navigation bar above header in my Genesis Child Theme.
You can see it here => http://theVasilis.com
Now this utility bar has 2 widgets , one aligned left the other aligned right with 50% width each one of them.
I'd like to place my name with larger font on the left - left part of the utility bar PLUS the default navigation bar menu after this.
Also I would like to place a small search bar exactly right after the social media icons widget at the right - right part of the right utility bar.
And if possible this needs to be responsive.
My end goal is to make the utility bar similar to this website => http://michaelhyatt.com but WITHOUT the logo in the middle (if this could get included it would be perfect)
Here is the CSS I'm using for the Utility Bar
/* Utility Bar --------------------------------------------- */ .utility-bar { background-color: #fff; border-bottom: 1px solid #ddd; color: #ddd; font-size: 12px; font-size: 1.2rem; padding: 10px 0; padding: 1rem; } .utility-bar a { color: #4099FF; } .utility-bar a:hover { text-decoration: underline; } .utility-bar-left, .utility-bar-right { width: 50%; } .utility-bar-left p, .utility-bar-right p { margin-bottom: 0; } .utility-bar-left { float: left; } .utility-bar-right { float: right; text-align: right; } .utility-bar input[type="search"] { background: inherit; padding: 10px 0 0; padding: 1.0rem 0 0; }
And here is the PHP I'm using
//* Add utility bar above header add_action( 'genesis_before_header', 'utility_bar' ); function utility_bar() { echo '<div class="utility-bar"><div class="wrap">'; genesis_widget_area( 'utility-bar-left', array( 'before' => '<div class="utility-bar-left">', 'after' => '</div>', ) ); genesis_widget_area( 'utility-bar-right', array( 'before' => '<div class="utility-bar-right">', 'after' => '</div>', ) ); echo '</div></div>'; }
Any ideas?
Kindly appreciate your time.
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
December 5, 2015 at 2:53 pm #172839Victor FontModeratorI'm not clear on what you are asking. You've properly defined the widget areas. All you have to do is add widgets to them for your content under the appearance/widgets menu.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?December 5, 2015 at 9:34 pm #172855VasilisMemberHey Victor , thank you very much
Well each widget for each utility bar stands one under each other instead of side by side...
Plus the custom menu I want to appear on the left utility bar again stands one under another (the links) instead of side by side.
I don't know if you can see it now...
I have a screenshot of the problem here.
https://drive.google.com/file/d/0B57IEjC--2MUQzFkMEN6dzJrak0/view?usp=sharing
I'm guessing it's a CSS problem but I'm not sure how to put the widgets side by side instead of going one under each other.
Any ideas?
Appreciate it
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
December 7, 2015 at 2:56 pm #173075Victor FontModeratorIt is CSS, but it's impossible for me to tell you exactly how to do it from an image. Essentially, you have to create CSS for the widgets that displays the widgets inline or inline block and splits the width of the left and right areas into 2. It would look something like this:
.utility-bar-left widgets, .utility-bar-right widgets { display: inline-block; width: 50%; }
I can't do better that that without access to the source.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?December 7, 2015 at 8:51 pm #173118VasilisMemberVictor thank you very much
I appreciate it.
What kind of access would you require if I may?
The code I use is the one written before.
Would you like to access the admin part of the website?
Now with your code it forced widgets to honor the 50% width on the utility bar which is one step better.
However widgets do NOT stay at the same line. The second widget appears exactly under the first instead of side by side.
Appreciate your support. Thank you 🙂
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
December 9, 2015 at 9:51 pm #173388VasilisMemberBumping this thread.
Any ideas how I can add:
- 2 widgets (side by side) on left utility bar
- 2 widgets (side by side) on right utility bar
Also how can I make the utility bar responsive?
Appreciate your support.
Kind Regards
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
-
AuthorPosts
- The topic ‘Genesis Utility Bar Above Header Small Fixes…’ is closed to new replies.