Hi, I’m working on a site and I have a couple of issues with the mobile nav bar that I hope you can help me out with!
The mobile nav bar button does work on smaller screen sizes, but I’d like to increase the font size of the page names for it. I’ve tried CSS but it’s not working, so I have no idea how to do it!
.x-navbar .mobile .x-nav li>a {
font-size: 18px !important;
}
Thanks!
Hi There,
To make the navbar mobile work on the screensize: 980px - 1199px, please add this custom CSS:
@media (max-width: 1199px){
.x-nav-wrap.mobile.x-collapsed {
display: none;
}
.x-nav-wrap.mobile {
display: block;
}
}
I could see that this custom CSS was added inside the @media (min-width:768px) and (max-width:979px) {} query, please add it at the end of your custom CSS.
Let us know how it goes!
Hi! Many thanks for your quick reply!
The CSS you gave to make the navbar mobile work on screensize 980px - 1199px, was spot on, thank you!
I added the CSS to increase the font size for the page names on the mobile nav bar, to the end of my custom CSS, but it still hasn’t changed it.
Thanks!
Hi @core365,
I believe that you used the correct code to change the size of your pages however it is not executed in the front page.
.x-navbar .mobile .x-nav li>a {
font-size:18px !important;
}
Usually, this happens when there is a lacking bracket or the CSS you entered lacks closing bracket and it causes your code not to be executed.
Check your CSS one by one if you have properly closed or opened it with the curly bracket. If still you could not find it, share us your custom CSS in so we could try find it.
Thanks.
Hi, I’ve checked through my CSS and can’t see a missing closing bracket. That’d be great if you could take a look through the CSS, here it is!
/* Header */
.x-navbar {
border-bottom: solid 3px #3f9903;
}
/* Slideshow*/
.page-template-template-blank-4-php .x-slider-container.below {
border-bottom: 0px;
}
.hentry {
margin-top: 0px;
}
/* Navbar Sub Categories*/
.x-navbar .desktop .sub-menu li > a {
font-size: 2em;
font-family: "Catamaran",sans-serif;
text-transform: uppercase;
font-size: 15px;
}
.desktop .sub-menu {
background-color: rgba(215, 228, 207, 0.75) !important;
}
.x-navbar .desktop .x-nav > li ul {
top: 10em;
}
/* Social Media Icons */
.x-topbar .x-social-global a {
width: 20px;
height: 20px;
line-height: 0px;
margin-right: 6px;
margin-left: 6px;
color: #dadada;
}
.x-topbar .x-social-global a:hover {
color: #fff;
}
.x-topbar .x-social-global a i {
font-size: 25px;
}
.x-topbar .x-social-global {
float: right;
margin-top: -22px;
}
.x-colophon.bottom .x-social-global a {
width: 45px;
height: 25px;
line-height: 0px;
margin: 0px;
color: #dadada;
}
.x-colophon.bottom .x-social-global a i {
font-size: 30px;
}
.x-colophon.bottom .x-social-global a:hover {
color: #fff;
}
.x-colophon.bottom .x-social-global {
padding-bottom: 10px !important;
}
.x-social-global a {
background-color: transparent !important;
}
.x-social-global a:hover {
background-color: transparent !important;
}
/* Footer */
.x-colophon.bottom {
padding: 5px 0;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.8;
border-top: solid 3px #3f9903;
}
.x-colophon.bottom .x-colophon-content {
margin: 0px 0;
}
.x-colophon.bottom .x-nav li a {
font-size: 14px !important;
font-style: normal !important;
letter-spacing: 0.01em !important;
text-transform: uppercase;
font-family: "Catamaran",sans-serif;
}
.x-colophon.bottom .x-nav li:before {
content: " ";
float: left;
margin: 0 0.85em 0 0.85em;
opacity: 0.35;
}
.x-colophon.bottom .x-nav {
margin-bottom: 30px;
}
.x-colophon.bottom .x-nav li a:hover {
color: #409b03;
opacity: 1;
}
/* View on Mobile Devices */
@media (max-width: 979px) {
.x-brand.img {
display: block;
float: none;
text-align: center;
margin-bottom: 5px;
}
.x-navbar {
text-align: center;
padding-bottom: 20px;
}
.masthead-inline .x-btn-navbar {
display: inline-block;
float: none;
text-align: center;
}
.x-topbar {
height: auto !important;
}
.x-topbar .p-info {
width: auto;
max-width: 100%;
}
}
@media (max-width: 979px) {
.x-navbar-fixed-top-active .masthead {
position: initial;
}
}
@media (max-width: 1199px){
.x-nav-wrap.mobile.x-collapsed {
display: none;
}
.x-nav-wrap.mobile {
display: block;
}
}
@media (min-width: 0px) and (max-width: 240px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
margin-top: 0px;
}
.x-brand.img {
margin-top: 11px;
width: auto;
float: center;
}
.masthead-inline .x-btn-navbar {
display: inline-block;
float: center;
margin-top: 10px;
}
.x-btn-navbar, .x-btn-navbar.collapsed {
font-size: 20px;
}
.x-topbar {
height: 68px !important;
}
.x-topbar .p-info {
font-size: 14px;
letter-spacing: 0px;
}
.x-navbar {
height: auto;
}
.x-navbar .mobile .x-nav {
background-color: rgba(255, 255, 255, 0.92);
padding: 20px;
}
}
@media (min-width: 241px) and (max-width: 480px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
margin-top: 0px;
}
.x-brand.img {
margin-top: 11px;
width: 195px;
float: left;
}
.masthead-inline .x-btn-navbar {
display: inline-block;
float: right;
margin-top: 25px;
}
.x-btn-navbar, .x-btn-navbar.collapsed {
font-size: 21px;
}
.x-topbar {
height: auto !important;
position: absolute;
}
.x-topbar .p-info {
font-size: 14px;
letter-spacing: 0px;
}
.x-navbar {
height: 162px;
}
.x-topbar .x-social-global {
float: none;
margin-top: 10px;
}
.x-navbar .mobile .x-nav {
background-color: rgba(255, 255, 255, 0.92);
padding: 20px;
}
}
@media (min-width: 481px) and (max-width: 767px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
margin-top: 0px;
}
.x-brand.img {
margin-top: 11px;
float: left;
}
.masthead-inline .x-btn-navbar {
display: inline-block;
float: right;
margin-top: 25px;
}
.x-topbar {
height: auto !important;
position: absolute;
}
.x-navbar {
height: 188px;
}
.x-topbar .x-social-global {
float: none;
margin-top: 10px;
}
.x-navbar .mobile .x-nav {
background-color: rgba(255, 255, 255, 0.92);
padding: 20px;
}
}
@media (min-width: 768px) and (max-width: 979px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
margin-top: 0px;
}
.x-brand.img {
margin-top: 11px;
float: left;
}
.masthead-inline .x-btn-navbar {
display: inline-block;
float: right;
margin-top: 25px;
}
.x-topbar {
height: auto !important;
}
.x-navbar {
height: 188px;
}
.x-topbar .x-social-global {
float: none;
margin-top: 30px;
padding-bottom: 5px;
}
.x-navbar .mobile .x-nav {
background-color: rgba(255, 255, 255, 0.92);
padding: 20px;
}
}
@media (min-width: 980px) and (max-width: 1199px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
margin-top: 0px;
}
.x-brand.img {
margin-top: 11px;
float: left;
}
.x-navbar .desktop .x-nav > li > a {
font-size: 12.5px;
letter-spacing: 0em;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 6px;
padding-right: 6px;
}
.x-navbar {
height: 188px;
}
.x-topbar .x-social-global {
float: none;
margin-top: 30px;
padding-bottom: 5px;
}
.x-navbar .mobile .x-nav {
background-color: rgba(255, 255, 255, 0.92);
padding: 20px;
text-align: center;
}
}
@media (min-width: 965px) and (max-width: 1191px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
margin-top: 0px;
}
.x-brand.img {
margin-top: 11px;
float: left;
}
.masthead-inline .desktop .x-nav {
display: none;
}
.masthead-inline .x-btn-navbar {
display: inline-block;
float: right;
margin-top: 25px;
}
.x-topbar {
height: auto !important;
}
.x-navbar {
height: 188px;
}
.x-topbar .x-social-global {
float: none;
margin-top: 30px;
padding-bottom: 5px;
}
}
@media (min-width: 1185px) and (max-width: 1320px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
margin-top: 0px;
}
.x-brand.img {
margin-top: 11px;
float: left;
}
.masthead-inline .desktop .x-nav {
display: none;
}
.masthead-inline .x-btn-navbar {
display: inline-block;
float: right;
margin-top: 25px;
}
.x-topbar {
height: auto !important;
}
.x-navbar {
height: 188px;
}
.x-topbar .x-social-global {
float: none;
margin-top: 30px;
padding-bottom: 5px;
}
}
@media (min-width: 1266px) and (max-width: 1500px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
margin-top: 0px;
}
.x-brand.img {
margin-top: 11px;
float: left;
}
.x-navbar .desktop .x-nav > li > a {
font-size: 15px;
letter-spacing: 0em;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 6px;
padding-right: 6px;
}
.x-navbar {
height: 188px;
}
.x-topbar .x-social-global {
float: none;
margin-top: 30px;
padding-bottom: 5px;
}
}
.x-navbar .mobile .x-nav li>a {
font-size: 18px !important;
}
Thanks!
Hi There,
Thanks for the CSS.
Can you please add this code to the top of all other custom CSS?
.x-navbar .mobile .x-nav li > a {
font-size: 18px !important;
}
If that doesn’t help please send us your login details in a secure note so that we can have a look.
Thanks
I moved the CSS to the top, but it’s still not working. I’ll put the admin info in a secure note.
Thanks!
Hi There,
It’s working now with small change.
Please check and let us know!
THanks
That’s great, thank you!
I wouldn’t have thought to take the > out of the CSS, as I copied it straight from the Inspect Elements!
Thanks for all the time and effort spent on this!
Glad we were able to help 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.