Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • #1483463

    Hello, I need CSS for Font size and Color options for “Full page overlay menu” sub menu.

    They have a lot of SubMenus and I am trying to differentiate from main nav.

    Thanks

    https://championschoolssouthmountain.armourcloud.io/

    #1483464

    And the last menu item is the Address. Is there a way to just make that text size smaller? Thanks!

    #1483465

    I created this screenshot to help with what I need code for: https://img.savvyify.com/image/menu-color-and-size.9tVgz

    Thank you!

    #1483525

    Please let me know on this when you can. thanks

    #1483554

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #av-burger-menu-ul li.av-show-submenu > a > .avia-menu-text {
    	color: blue;
    }
    #av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
    	color: yellow;
    }
    .html_av-submenu-hidden #av-burger-menu-ul .av-submenu-indicator:before {
    	color: yellow;
    	font-size: 20px;
    }
    #top #wrap_all #av-burger-menu-ul .menu-item-2846 {
    	font-size: 12px !important;
    }

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1483942

    Ok great, but can you get me CSS for smaller Font size for all the “sub menu” items? (So the Main menu fonts size is larger and the Sub Menu is smaller.)

    #1483965

    Hi,
    Change this css:

    #av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
    	color: yellow;
    }

    to this:

    #av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
    	color: yellow;
    	font-size: 20px;
    	line-height: 20px;
    }

    then add this css:

    .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.av-show-submenu li {
        line-height: 20px;
    }

    Screen Shot 2025 05 10 at 5.34.09 AM
    adjust to suit.
    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

    Best regards,
    Mike

    #1484264

    great job! Just a couple more issues if you can help with these. I might need update CSS code.

    1. on desktop the logo is not center with the buttons: screenshot: https://img.savvyify.com/image/logo-off-center.9wllh
    2. on mobile, the logo overlaps the buttons: screenshot: https://img.savvyify.com/image/overlaps-logo-on-mobile.9wyWp
    3. on desktop their is a thin line under the address: screenshot: https://img.savvyify.com/image/remove-line-on-desktop.9wsV6
    3. on desktop, can you make the top address bar sticky? It is already on mobile, but not desktop

    Thank you!

    • This reply was modified 2 weeks, 3 days ago by bemodesign.
    #1484312

    Please let me know on this when you can. This is the last thing before we are good. thanks!

    #1484358

    Let me know if anyone can help with this. Really need to get this final items done. thank you!

    #1484393

    Hi,
    Unfortunately I can not make changes to your css as I get a notice that I have been blocked.
    So for #1 change this css:

    #top .logo {
      width: calc(100% - 170px);
      left: unset;
    }
    

    to this

    #top .logo {
      /*width: calc(100% - 170px);*/
    width: 100%;
      left: unset;
    }
    

    Please see if you can disable the plugin that is blocking us.
    Screen Shot 2025 05 17 at 5.47.48 PM

    Best regards,
    Mike

    #1484395

    You will have access now. Please let me know on the issues. The code is a mess but please help me fix this. And I really wanted to center the logo on desktop, but it needs to align with buttons. And on mobile, the logo is over the buttons.

    thanks for all you help

    #1484401

    Hi,
    It looks like you forgot the semicolon after the width: 100%
    Screen Shot 2025 05 18 at 8.51.08 AM
    while I can see your site, I can’t make any changes, your plugin keeps blocking me and I answered the CAPTCHA six times and I’m still blocked.
    If you correct this, it should work like this:
    Screen Shot 2025 05 18 at 8.55.34 AM
    As for the other issue try adding this css:

    @media only screen and (max-width: 767px) { 
    #av_section_1 .container.av-section-cont-open,
    .page-id-910 #av-layout-grid-1 {
    	padding-top: 130px !important;
    }
    }

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    Best regards,
    Mike

    #1484417

    Same issues. Logo still shows left justified on desktop and on mobile view, the logo is over the top button. There must be code that is working against this. Below is my entire code if you can take a look and see whats wrong. I don’t have products either, so not sure why I have all this code.
    I just need to fix these things and we are done with the website.
    thanks for your help

    .product-sales-count {
    font-size: 0.8em;
    margin-top: 0;
    top: -10px;
    position: relative;
    }

    /* TEXT SHADOW FOR – Fullwidth Easy Slider – Headline: */
    .avia_transform .av_slideshow_full .active-slide .avia-caption-title,
    .avia_transform .av_fullscreen .active-slide .avia-caption-title
    {text-shadow: 2px 2px 2px #717070;}

    /* TEXT SHADOW FOR – Fullwidth Easy Slider – Caption Text: */
    #top .avia-slideshow .av-slideshow-caption .avia-caption-content p {
    text-shadow: 2px 2px #717070;
    }

    /* TEXT SHADOW FOR – ALL H1 headlines: */
    .av-special-heading h1 {
    text-shadow: 1px 1px #717070;
    }

    /* TEXT SHADOW FOR – SPECIFIC H1 headlines: */
    .av-special-heading.av-nlr5x-bb365aeef7c91c871c871ed41100301d h1 {
    text-shadow: 1px 1px #717070;
    }

    /* TEXT SHADOW FOR – subheading text: */
    #top .av-subheading p {
    text-shadow: 1px 1px #717070;
    }

    #header_meta a, #header_meta span {
    font-size: 16px !important;
    line-height: 17px;
    }

    /* Sticky header on mobile */
    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    /* Margin top value should be equal to header height*/
    margin-top: 80px;
    }
    .responsive #top #wrap_all #header {
    position: fixed;
    }
    }

    @media only screen and (max-width: 1100px) {
    .av-main-nav > li.menu-item { display: none; }
    .av-main-nav > li.menu-item-avia-special { display: block; }
    }

    .phone-info {
    font-size: 16px;
    }

    @media only screen and (max-width: 479px) {
    .responsive #top .slideshow_caption h2 {
    font-size: 18px !important;
    }

    .responsive #top .slideshow_caption .avia-caption-content {
    font-size: 16px !important;
    line-height: 14px;
    }

    .avia-slideshow-inner, .avia-slideshow-inner li, .avia-slideshow-inner li img {
    height: 30vh !important;
    }
    }

    span.avia-menu-text {
    text-transform: uppercase;
    }

    .avia-section.av-minimum-height .container .content {
    vertical-align: bottom;
    }

    .avia-section.av-minimum-height.text-bottom .container .content {
    vertical-align: bottom;
    }
    .avia-section.av-minimum-height.text-top .container .content {
    vertical-align: top;
    }

    .avia-button {
    border: 1.5px solid !important;
    }

    #top .avia-button {
    border-radius: 5px !important;
    }

    @media only screen and (max-width: 767px) {
    body, body .avia-tooltip {
    font-size: 20px;
    }
    }

    @media only screen and (max-width: 767px) {
    .page-id-3230 .avia-builder-el-0.av-minimum-height-100:not(.av-slideshow-section) .container {
    height: 767px !important;
    }
    }

    #main .sidebar a,
    #footer a,
    #socket a {
    text-decoration: underline;
    }
    a.avia-button{
    text-decoration:none!important;
    }
    @media only screen and (max-width: 989px){
    .html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent;
    }
    .responsive #top #main {
    margin-top: 0;
    }
    }

    #top #wrap_all #socket .container {
    text-align: center;
    }

    #top #wrap_all #socket .container {
    text-align: center;
    }

    #top #wrap_all #socket .copyright {
    display: block;
    float: none;
    clear: both;
    text-align: center;
    }

    #top .content .flex_column .widget_nav_menu li {
    border-top-width: 0;
    border-bottom-width: 0;
    }

    #footer h3.widgettitle{
    border:none!important;
    }

    @media only screen and (max-width: 769px) {
    .flex_column.av-l3szqp26-162f9236fd15346c9c727f5f94b66dce {
    min-height: 50vh !important;
    }
    }

    .html_elegant-blog #top .post-entry .post-meta-infos,
    .html_elegant-blog .avia-content-slider .slide-meta,
    #top .news-time {
    display: none;
    }

    html, body {
    background-color: #fff !important;
    }

    #header:not(.av_header_transparency) #header_main {
    -moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
    -webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
    box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
    }

    #top.single-product .product_meta {
    visibility: hidden;
    }

    .is-large.wc-block-cart .wc-block-cart-items th span {
    font-size: 2em;
    }

    table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    font-size: 2em;
    }

    .wc-block-components-form .wc-block-components-text-input.is-active label, .wc-block-components-text-input.is-active label {
    display: none;
    }

    #top div ul.product_list_widget li a {
    display: block;
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1.6em !important;
    }

    #top .dropdown_widget ul.product_list_widget li .quantity {
    color: #000000;
    font-size: 1em;
    }

    #top .dropdown_widget .total span.woocommerce-Price-currencySymbol, #top .dropdown_widget .total {
    color: #000000;
    font-size: 1em;
    }

    div .product-sorting {
    display: none;
    }

    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    padding-top: 88px !important;
    }
    .responsive.html_header_transparency #top #main {
    padding-top: 0 !important;
    }
    }

    .page-id-432 .components-flex-item input, .page-id-433 .wc-block-components-text-input input {
    padding: 8px 116px;
    }

    .wc-block-cart__submit-container a .wc-block-components-button__text {
    color: #fff;
    }

    .wc-block-components-address-form-wrapper .components-base-control__label {
    top: -50px;
    }

    .wc-block-components-address-form-wrapper .components-base-control__label {
    top: -30px !important;
    }

    #top .av-product-class-minimal img {
    border-radius: 30px !important;
    }
    #top .av-product-class-minimal img {
    border-radius: 30px !important;
    }

    .select2-container–default .select2-results__option–highlighted[aria-selected], .select2-container–default .select2-results__option–highlighted[data-selected], #top .select2-results {
    color: #000 !important;
    }

    @media only screen and (max-width: 768px) {

    /* Add your Mobile Styles here */
    #top #bc-custom-section div .flex_column {
    width: 46% !important;
    margin-left: 3% !important;
    border-radius: 30px;
    }
    }

    #top #bc-custom-section div .flex_column img {
    border-radius: 30px;
    }

    .woocommerce-Tabs-panel ul {
    list-style: disc;
    margin-left: 15px;
    }

    .woocommerce-Tabs-panel ul, .woocommerce-product-details__short-description ul {
    list-style: disc;
    margin-left: 15px;
    }

    #menu-item-150 > a > .avia-menu-text {
    color: #f19809!important;
    }

    #av-burger-menu-ul .menu-item-150 > a > .avia-menu-text {
    color:#f19809!important;
    }

    #menu-item-2076 > a > .avia-menu-text {
    color: #f19809!important;
    }

    #av-burger-menu-ul .menu-item-2076 > a > .avia-menu-text {
    color:#f19809!important;
    }

    .avia-image-container .avia_image, .avia-image-container .avia-image-overlay-wrap {
    border-radius: 30px;
    }

    #footer .textwidget .menu-blissfull-main-menu-container p {
    margin: 0;
    width: auto;
    display: inline-block;
    }

    @media only screen and (max-width: 767px) {
    .responsive .home #wrap_all #av-section-shop-category .flex_column {
    width: 48%;
    padding: 1%;
    }
    }

    ul.a-unordered-list.a-vertical.a-spacing-mini li {
    margin-bottom: 20px;
    }

    #top .price, #top .price span, #top del, #top ins {
    display: inline;
    text-decoration: none;
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
    }

    .page-id-389 .shop_columns_3 .products .product {
    width: 100%;
    }

    .page-id-91 .shop_columns_3 .products .product {
    width: 100%;
    }

    h1{
    text-transform: capitalize !important;
    }

    .template-page .entry-content-wrapper h1{
    text-transform: capitalize !important;
    }

    a.cart_dropdown_link {
    font-size: 28px !important;
    }

    #top a.cart_dropdown_link span[data-av_icon] {
    font-size: 28px;
    color: var(–enfold-header-color-color);
    }

    #top #header .av-main-nav #menu-item-wc-account-icon > a {
    color: #f19809;
    font-size: 28px;
    }

    /* Increase base font size on mobile devices */
    @media only screen and (max-width: 767px) {
    body,
    p,
    .entry-content {
    font-size: 18px !important;
    line-height: 1.6 !important;
    }
    }

    @media only screen and (max-width: 767px) {
    #top .av-special-heading .av-subheading p {
    font-size: 24px
    }
    }

    img[src*=”amazon-adsystem”] {
    display: none;
    }

    #top .av-burger-overlay-bg {
    opacity: 0.8;
    background: #000;
    }

    ——————–

    div .logo {
    left: 37%;
    }
    div.av-burger-overlay-bg {
    background-color: rgba(0, 0, 0, .7);
    }

    #top .av-burger-overlay-bg {
    opacity: 0.8;
    background: #000;
    }

    #top .av-main-nav-wrap {
    float: right;
    position: relative;
    z-index: 3;
    padding: 0 !important;
    margin: 0 0 0 15px !important;
    }

    .header_color.av_header_transparency .av-hamburger-inner,
    .header_color.av_header_transparency .av-hamburger-inner::before,
    .header_color.av_header_transparency .av-hamburger-inner::after {
    background-color: #FFF !important;
    }

    #top .av_header_transparency .phone-info,
    #top .av_header_transparency .social_bookmarks li a {
    color: #FFF !important;
    }

    #top .av_header_glassy.av_header_transparency .avia-menu.av_menu_icon_beside {
    border: none !important;
    }

    #top .main_menu {
    width: 170px
    }

    #top .logo {
    /*width: calc(100% – 170px);*/
    width: 100%;
    left: unset;
    }

    @media only screen and (max-width: 767px) {
    #av_section_1 .container.av-section-cont-open,
    .page-id-910 #av-layout-grid-1 {
    padding-top: 130px !important;
    }
    }

    #top .logo img {
    left: 50%;
    transform: translateX(-50%)
    }

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
    }
    }

    @media only screen and (max-width: 767px) {
    #header .social_bookmarks {
    display: none !important;
    }
    }

    #top #wrap_all #av-burger-menu-ul li {
    font-size: 30px !important;
    }

    ——————-

    #av-burger-menu-ul li.av-show-submenu > a > .avia-menu-text {
    color: blue;
    }
    #av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
    color: #f5c526;
    font-size: 20px;
    line-height: 20px;
    }
    .html_av-submenu-hidden #av-burger-menu-ul .av-submenu-indicator:before {
    color: #f5c526;
    font-size: 20px;
    }
    #top #wrap_all #av-burger-menu-ul .menu-item-2846 {
    font-size: 24px !important;
    }

    .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.av-show-submenu li {
    line-height: 20px;
    }

    • This reply was modified 1 week, 6 days ago by bemodesign.
    #1484419

    Hi,
    Same issue, the css is not corrected:
    Screen Shot 2025 05 18 at 8.51.08 AM
    I’m still blocked.

    Best regards,
    Mike

    #1484421

    Got that and the logo is centered. It must not have saved at first.
    So, just need these to be done. Can you give me CSS or fix, by looking at my code I sent?

    2. on mobile, the logo overlaps the buttons: screenshot: https://img.savvyify.com/image/overlaps-logo-on-mobile.9wyWp
    3. on desktop their is a thin line under the address: screenshot: https://img.savvyify.com/image/remove-line-on-desktop.9wsV6
    4. on desktop, can you make the top address bar sticky? It is already on mobile, but not desktop

    Thank you!

    #1484466

    Hi,
    Perhaps you didn’t see the css for the logo overlapping the buttons that I posted above:

    @media only screen and (max-width: 767px) { 
    #av_section_1 .container.av-section-cont-open,
    .page-id-910 #av-layout-grid-1 {
    	padding-top: 130px !important;
    }
    }

    Screen Shot 2025 05 18 at 8.55.34 AM
    it would be easier if you disabled the plugin that is blocking me from making changes

    Best regards,
    Mike

    #1484480

    Your the best!
    Last things.

    1. How do I reduce space between address and phone number in the header?: https://img.savvyify.com/image/reduce-space.9wb5f

    2. How to show Social Media icons larger on mobile view at the top

    3. Still doesn’t have sticky top bar (address bar) on desktop view.

    thanks!

    • This reply was modified 1 week, 4 days ago by bemodesign.
    • This reply was modified 1 week, 4 days ago by bemodesign.
    #1484544

    Hi,
    #3: try unselecting “Unstick Topbar”
    Screen Shot 2025 05 21 at 6.20.27 PM

    Best regards,
    Mike

    #1484605

    Thanks! Can you help with these please?;

    1. How do I reduce space between address and phone number in the header?: https://img.savvyify.com/image/reduce-space.9wb5f

    2. How to show Social Media icons larger on mobile view at the top

    #1484620

    Hi,
    1:

    @media only screen and (max-width: 767px) { 
    #top #header .phone-info {
    	padding-top: 0;
    }
    #menu-item-1413 a {
    	padding-bottom: 0;
    }
    #avia2-menu {
    	line-height: 10px;
    }
    }

    2:

    @media only screen and (max-width: 767px) { 
    #top #wrap_all .social_bookmarks li a {
      line-height: 30px!important; 
      min-height: 30px!important; 
      font-size: 30px!important; 
      }
      
      #top #wrap_all .social_bookmarks li {
      height: 30px!important; 
      width: 50px!important; 
      }
      
      #top #wrap_all .social_bookmarks {
          height: 35px!important;
      }
    }

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1484629

    Your awesome, thanks!

    #1484631

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Font size and Color options for “Full page overlay menu” sub menu’ is closed to new replies.