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.

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.

Related Tutorials

• Display Header Right Widget Custom Menu & Social Icons In-Line