Add Text Phone Number Inline With Custom Nav Menu in Header Right Widget

If you add a custom menu and text widget to the header right widget area in Genesis like this:

You’ll find the text you added to the text widget displays below the custom nav menu like this phone number does:

To display the phone number or any text inline with your menu, you can use CSS.

There’s different ways to code the CSS, this is one of many.

.header-widget-area .widget_text {
        float: right;
	    padding: 24px;
}

.header-widget-area .widget_nav_menu {
     display: inline-block;
}

@media only screen and (max-width: 768px) {

    .header-widget-area .widget_text {
	    float: none;
	    padding: 0;
    }
}

And here’s one example of how your menu displays inline with your phone number in your header right widget.

Notes

The end result may vary per theme as well as other variables like what you add inside the text widget etc.
Tested on the Education Pro child theme by StudioPress

This post is based on this forum question:

Hoping someone can help me figure out how (non-coder way) to insert a phone number in the header widget area.

Ideally, I’d like the text to be located to the right (float right?) of the nav menu while the nav menu is more centered in the header.

Merely putting a separate text widget in the widget area for the phone number…makes the phone number appear below the nav menu. Again, I would like it to appear on the same line as the nav menu…but to the right of it.

Notes

Related Tutorials