Top Menu Bar All on "One" Row (with Facebook symbol)

Unite Theme
1

I’m not even sure this is possible, but I’ll ask anyway.

Is there any way to keep the top menu bar all on one row even when a computer screen is smaller? We’d like for the font to just get smaller when the screen is smaller so that the top menu always “remains” on just “one” row.

I’m enclosing a screenshot of what we want it to always look like all in one row, but also notice that our Facebook icon does not show.

I’m also enclosing a second screenshot of what the top menu bar looks like when on two rows, which we think looks ugly. It “might” look better if a line appeared that separates the two rows.

Notice also that when the top menu bar is on two lines our Facebook icon appears. Why does it not show when the menu bar is in one row? (Screenshot attached also)

So “2” questions: How to keep menu bar on one row and how to have our Facebook icon appear.

Thank you so much.

2

Hi @thegoldenpathway,

I hope you are well today and thank you for your question.

How to keep menu bar on one row

You will have to develop some custom CSS code using Media Query to achieve this as described on the following pages so that the font size of menu items will change depending on the screen sizes.

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

and how to have our Facebook icon appear.

Could you please share your site URL where it’s displaying so that i can help you to always display it?

Kind Regards,
Movin

3

Sorry, but I’m very disappointed in this response.

I know nothing about CSS and those pages are confusing. Aigars used to just tell us the code, and if what we wanted wasn’t possible, he’d tell us so.

I sent you the screenshots of the home page already that showed what I meant about the Facebook symbol, but here’s the URL.

By the time you respond again, the banner may be changed.

4

Hi @thegoldenpathway,

I know nothing about CSS and those pages are confusing. Aigars used to just tell us the code, and if what we wanted wasn’t possible, he’d tell us so.

If you don’t know about CSS then to achieve it just try adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS


@media (min-width: 768px) and (max-width: 991px) {
	ul#menu-primary-menu a {
  font-size: 11px;
  padding: 18px 11px;
}
}

Please note that the above code will reduce the menu font size on smaller screen sizes and it depends on the number of menu items in the menu so it won’t work if you add more number of menu items and to make it work you have to reduce the font and padding size in the above code.

I sent you the screenshots of the home page already that showed what I meant about the Facebook symbol, but here’s the URL.

Yes you have shared the screenshot but it just displays the issue but i can’t troubleshoot the issue without accessing your site as the issue is your site specific. The facebook social icon is always displaying for me on my test site and it’s not displaying for you on large screen sizes because of CSS conflict on your site.

To resolve this CSS conflcit issue on your site, please try using the following custom CSS code on your site as described previously.

div#social {
  top: 0;
}

Best Regards,
Movin

5

Oh, thank you SO MUCH!!! That solved both problems.

We’re so grateful.

6

You are most welcome here :slight_smile: