Log in SwiftGrid →
Resolved

Items In Headers

Ultra Theme started by pranaman Jul 6, 2017 1 reply
pranaman Jul 6, 2017 · 7:47 am #7192

Hi,

I am trying to add more items to the topmost row with the logo and nav of http://tinyurl.com/y8l2a6e2.

I am using ‘Widgets in Menu for WordPress’ and have added an ‘f’ for facebook and a phone number.

A few items:

1 I’d like the ‘f’ larger. It uses the SO Social Widget, and I’ve chosen the large and extra large size. Doesn’t seem to make a difference up there.

I know I’m mixing another plugin which uses another plugin in this theme, so let me know if we need to go about this differently.

2 I’d like to use more of the area between the logo and the nav, however, it seems the section for the nav menu only goes so wide. In Inspector it shows that it’s 686.91 px wide. Looks different in mobile of course.

If I want it to look good in both mobile and desktop, which is better – to widen the div, and if so, how? Or, add a div between the logo and the nav, and how could I do as well?

Thanks,
Eric

Andrew Misplon Puro Jul 6, 2017 · 8:01 am #7193

Hi Eric

You can adjust the percentage of header space the logo and nav take up using this snippet:

.site-header .site-branding-container {
	max-width: 35%;
}

.main-navigation {
	max-width: 65%;
}

Add to Customize > Additional CSS. The total must equal 100%.

To widen the header you can try adding to Custom CSS:

.site-header .container {
	max-width: 95%;
}

The social widget in the header is clashing with the theme’s normal social icons in menus which is where the issue is occurring. You could try adding the Facebook icon just by adding a custom menu item with a link to the Facebook profile, an icon will be added automatically (https://purothemes.com/documentation/general-wordpress/social-icons-menus/). The phone number could perhaps also be added using a custom menu link.

2 posts