[Resolved] Font size of the sub item menu

[Fekry]

Hi there
I use this CSS:
.main-navigation .main-nav ul ul li a {
font-size: 10px;
}
https://www.screencast.com/t/Toz4iEhZAbt3
But the font size of the sub item menu is more than 10px
May you please help me to figure out the problem?
Thanks
…………..
note: my all CSS:
.push-down {
margin-top: 2em;
}
.main-navigation .main-nav ul ul li a {
font-size: 10px;
}
.main-navigation ul ul {
width: 250px;
}
.single .entry-title {
font-size: 34px;
line-height: 1.4em;
}
body .oceanwp-mobile-menu-icon {
float: none !important;
}
.site-logo.mobile-header-logo img {
padding: 0;
}
.secondary-navigation .menu-toggle {
display: none;
}
#mobile-header .site-logo {
position: absolute;
left: calc( 50% – 40px); /* 50% from the left – half your image width */
}
.category-1 .page-header {
display: none;
}
.footer-widgets h4 {
line-height: 0.8em;
}
/* New button styles */
div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit] {
padding: 6px; /* Increase distance between text and border */
width: 12%; /* Make the button full-width */
font-size: 1.1em; /* Increase text size */
}
div.wpforms-container-full .wpforms-form button[type=submit] {
width: auto !important;
}
body:not(.home) .lsi-social-icons .lsi-social-instagram a,
body:not(.home) .lsi-social-icons .lsi-social-instagram a:visited,
body:not(.home) .lsi-social-icons .lsi-social-instagram a:focus focus {
background: #DD2A7B !important;
}
body:not(.home) .lsi-social-icons .lsi-social-twitter a,
body:not(.home) .lsi-social-icons .lsi-social-twitter a:visited,
body:not(.home) .lsi-social-icons .lsi-social-twitter a:focus focus {
background: #55acee !important;
}
body:not(.home) .lsi-social-icons .lsi-social-facebook a,
body:not(.home) .lsi-social-icons .lsi-social-facebook a:visited,
body:not(.home) .lsi-social-icons .lsi-social-facebook a:focus focus {
background: #3b5998 !important;
}
body:not(.home) .lsi-social-icons .lsi-social-pinterest a,
body:not(.home) .lsi-social-icons .lsi-social-pinterest a:visited,
body:not(.home) .lsi-social-icons .lsi-social-pinterest a:focus focus {
background: #bd081c !important;
}
body:not(.home) .lsi-social-icons .lsi-social-linkedin a,
body:not(.home) .lsi-social-icons .lsi-social-linkedin a:visited,
body:not(.home) .lsi-social-icons .lsi-social-linkedin a:focus focus {
background: #0077b5 !important;
}
.updated-date:before {
content: “محدث: “;
}
.sidebar .mc4wp-form input[type=submit],
.sidebar .mc4wp-form input[type=text],
.sidebar .mc4wp-form input[type=email] {
width: 100%;
}

@media (max-width: 769px) { .mc4wp-form input[type=submit],
.mc4wp-form input[type=text],
.mc4wp-form input[type=email] {
width: 86%;
}
}
.entry-content .mc4wp-form input[type=”submit”] {
width: 275px;
}
.mc4wp-form input[type=”text”], .mc4wp-form input[type=”email”] {
background-color: #303030;
}
.wpforms-form button[type=submit] {
background-color: #ef5f00 !important;
border-color: #ef5f00 !important;
color: #fff !important;
}
.wpforms-form button[type=submit]:hover {
background-color: #303030 !important;
border-color: #303030 !important;
color: #fff !important;
}
.wpforms-form {
background-color: #eee;
padding: 20px 15px;
}
#generate-slideout-menu.do-overlay .slideout-menu li a {
display: flex;
}
.slideout-navigation.do-overlay .menu-item-has-children .dropdown-menu-toggle {
margin-right: auto;
}
.slideout-navigation.do-overlay .inside-navigation .main-nav {
margin-left: 0;
margin-right: 0;
}
.wp-show-posts-entry-title a {
color: #303030 !important;
}
.wp-show-posts-entry-title a:hover,
.wp-show-posts-image:hover + .wp-show-posts-entry-header .wp-show-posts-entry-title a,
.uagb-post__text .uagb-post__title a:hover,
.uagb-post__image:hover + .uagb-post__text .uagb-post__title a {
color: #1e72bd !important;
}

[Leo]

Hi there,

Can you try this instead?

body .main-navigation .main-nav ul ul li a {
    font-size: 10px;
}

Let me know 🙂

[Fekry]

It works for desktop view, now I would to adjust the font size of the sub item menu in mobile view.
May you kindly help me?
https://www.screencast.com/t/0rVUjruO

[David]

Hi there,

you can add another CSS rule specifically for mobile:

@media (max-width: 768px) {
    body .main-navigation .main-nav ul ul li a {
        font-size: 10px;
    }
}

[Fekry]

Hi David. It does not work

[Fekry]

Sorry. I need the CSS for Primary Navigation items in mobile view. not sub items.

[David]

Try this CSS for the sub menus:

.slideout-navigation.main-navigation.do-overlay .main-nav ul ul li a {
    font-size: 10px !important;
}

The parent items you can change the Customizer > Typograpghy > Slideout Navigation
There is a separate option for mobile

[Fekry]

Thanks David. I figured out that I can change it from : Customize > Typography > Off Canvas Panel.

[Author]

Posts