Make primary navigation menu and primary nav extras appear on same line

[nomad_jess]

Hi there,

I’d like to have my primary navigation menu and primary nav extras (currently: search bar/social icons) display on the same line.

Can anyone help with the code I need to make this change?

Many thanks in advance,

Jess

[Davinder Singh Kanith]

It seems you have modified width value of nav extras which is making the extras section to fall down (with reference to this site notesofnomads DOT com )

.nav-extras {
  display: inline-block;
  float: right;
  padding: 13px 0 11px;
  text-align: right;
  position: relative;
  width: 50%;
}

Change width value from 50% to 30% and then check

[nomad_jess]

Thank you, Davinder!

Yes, I did change that in hope that it would give more space to the nav extras. But what I didn’t do was change the primary navigation so that the width would total 100%!

Now I’ve got it! Thank you!

[Davinder Singh Kanith]

Yes, overall width should not exceed 100%. One suggestion: you can use small size for social icons like 24px – that will make elements align even better.

[nomad_jess]

Thank you so much, Davinder. Would you mind pointing out where I can change the size of the social icons? For the life of me I can’t seem to find the relevant piece of code. Many thanks in advance!

[Davinder Singh Kanith]

Follow these steps:
1. In WP Dashboard, go to Appearance > Widgets
2. Expand “Primary Nav Extras” section.
3. Then expand “Simple Social Icons” widget.
4. Enter small value in “Icon Size” field.

[nomad_jess]

Thank you, Davinder!

No wonder I couldn’t find it! I was looking in the style.css file Haha Your widgets make things very easy! Thank you!

[Davinder Singh Kanith]

Welcome!

[vinods2610]

Hello Everyone

I need your help as my menu bar is split in 2 from left and right. How can i remove this split part and make my menu bar one without split.

Thank You
Vinod Sharma

[Davinder Singh Kanith]

Vinod, can you share website URL with the issue? Without looking at the website, it is difficult to isolate the problem area.

[Author]

Posts