How to Keep Menu Bar All On One Line

Unite Theme
1

Hi there,

At one time Movin told me how to keep the menu bar all on one line, rather than going into two lines when the screen becomes smaller. That CSS still works on my other site using Unite theme, but it doesn’t work on my new site. Any ideas?

Here is the CSS from before that doesn’t seem to work on my current site.

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

2

Hello there,

I hope you are doing well today.

Please try using the following CSS without the media queries:

ul#menu-primary-menu a { font-size: 11px; padding: 18px 11px; }

Best Regards,
Support

3

No, unfortunately, that did not work. I’ve struggled for days with this one thing, trying everything I can think of.

4

Hello there,

I hope you are doing well today.

Could you please add a link to the website in question so that I can inspect it?

Best Regards,
Support

5

Hi there,

Here is the site: https://chicagospiritualseekers.net

I removed some tabs in the menu bar, reduced the font size and centered it, and and so it doesn’t go to two lines as quickly, but I’d prefer that it never does.

(The other site uses the Unite Theme and that CSS still works [see code above], not sure why it won’t on this one.)

6

Hey there,
Thank you for keeping in touch

I revised the CSS. Please try the code below to resolve the issues.

@media (min-width: 768px)and (max-width: 991px){
.nav {
    padding-left: 0%;
}
}

Best Regards,
Support

7

Thank you so much for trying to help me. I truly appreciate it.

Something is wrong with the curly brackets of what you gave me, and I didn’t want to experiment with it to try to fix it.

I also think it might help for you to see what other customizations I have made, in case there is something conflicting.

8

Trying again to upload the file.

9

Hey there,
Thank you for keeping in touch

Happy to help, I found two errors and corrected them here’s the code. Hope this helps.

.entry-meta {
 display: none;
}

#primary .entry-title {
 text-align: center;
}

.entry-title,
.entry-title a {
 font-size: 24px;
font-family: helvetica neue; sans serif;
color: #800080;
}

.site-title {
font-family: helvetica neue; sans serif; color: #8A2BE2;
font-size: 52px;
}

.entry-content h6 {
font-size: 13px;
}

.site-branding.col-md-6 {
 width: 100%;
 text-align: center;
}

#content blockquote {
 font-size: 12px;
}

/* Get rid of line */
#content blockquote {
 font-size: 12px;
 border-left: 0;
}

.site-description {
 color: #8B008B;
 font-family: Helvetica Neue; sans serif;
font-size: 16px;
}

h1, .entry-title {
font-size: 36px;
}

h3, .widget-title {
 font-size: 24px;
}

body {
 font-family: helvetica, sans serif;
font-size: 12pt
}

li {
  font-size:12px;
}

/* for centering nav bar */
@media (min-width: 768px) {
 .navbar-nav {
 float: none;
 padding: auto;
 }
 .nav {
 padding-left: 15%;
 }
 }

Best Regards,
Support

10

You are certainly persistent and I am grateful that you are trying to help. I wish I could report that this worked, but it didn’t. :frowning:

11

Hi there,

I’m sorry but the code I gave you wasn’t added to the snippet sent. I apologize.
Hopefully this does the trick.

.entry-meta {
 display: none;
}

#primary .entry-title {
 text-align: center;
}

.entry-title,
.entry-title a {
 font-size: 24px;
font-family: helvetica neue; sans serif;
color: #800080;
}

.site-title {
font-family: helvetica neue; sans serif; color: #8A2BE2;
font-size: 52px;
}

.entry-content h6 {
font-size: 13px;
}

.site-branding.col-md-6 {
 width: 100%;
 text-align: center;
}

#content blockquote {
 font-size: 12px;
}

/* Get rid of line */
#content blockquote {
 font-size: 12px;
 border-left: 0;
}

.site-description {
 color: #8B008B;
 font-family: Helvetica Neue; sans serif;
font-size: 16px;
}

h1, .entry-title {
font-size: 36px;
}

h3, .widget-title {
 font-size: 24px;
}

body {
 font-family: helvetica, sans serif;
font-size: 12pt
}

li {
  font-size:12px;
}

/* for centering nav bar */
@media (min-width: 768px) {
 .navbar-nav {
 float: none;
 padding: auto;
 }
 .nav {
 padding-left: 15%;
 }
 }

/*keep menu in one line*/
 @media (min-width: 768px)and (max-width: 991px){
.nav {
    padding-left: 0%;
}
}

Best Regards,
Support

12

OMG! It worked. It worked!!!

Thank you so much for your help. I am truly grateful. I will mark this as resolved. :slight_smile:

13

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support