[Resolved] Font size of the sub item menu

Home Forums Support Font size of the sub item menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1304184
    Fekry

    Hi there
    I use this CSS:
    .main-navigation .main-nav ul ul li a {
    font-size: 10px;
    }
    sub item menu.png
    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;
    }

    #1304345
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try this instead?

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

    Let me know 🙂

    #1304528
    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?
    mobile view.png

    #1304803
    David
    Staff
    Customer Support

    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;
        }
    }
    #1304885
    Fekry

    Hi David. It does not work

    #1304929
    Fekry

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

    #1304995
    David
    Staff
    Customer Support

    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

    #1305213
    Fekry

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.