Genesis Utility Bar Above Header Small Fixes…

[Vasilis]

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

http://theVasilis.com

[Victor Font]

I'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?

[Vasilis]

Hey 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

[Victor Font]

It 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?

[Vasilis]

Victor 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

[Vasilis]

Bumping 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

[Author]

Posts