• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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:

Widgets in header right

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

menu and text

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.

text and menu

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.

Related Tutorials

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

Reader Interactions

Comments

  1. Jim says

    October 23, 2014 at 10:43 pm

    Goodonya mate! Exactly what I needed! Works great…thanks!

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.