Okay
  Public Ticket #3408314
Nav Bar mobile height
Closed

Comments

  •  16
    Soluforyou started the conversation

    Hi there, how can I influence the height of the nav bar at my site. See www.soluforyou.com

    Note I made a TOP bar as as well, and use CSS to push the nav bar down a bit. 
    See the screenshot, the red area needs to be bigger/the same as above.

    Here my CSS as well:




    /* TOP BAR */
    body .easy-notification-bar-container {
        box-sizing: border-box; /* Add this line */
        background-color: #fcfbfa;
        border-bottom: 1px solid #D6D6D6;
        padding: 6px 0;
        position: fixed;
        width: 100%;
        left: 0px !important;
        top: 0;
        z-index: 9999;
        opacity: 0; /* Added for fade-in effect */
        animation: fadeIn 2s forwards; /* Added for fade-in effect */
    }

    /* SECOND BAR */
    .wpml-ls-item ul.sub-menu.tracked-pos {
        border-radius: 10px !important;
        border-top: 0px !important;
    }

    /* Fade-in effect animation */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @media (max-width: 768px) {
        .easy-notification-bar-container {
            display: none; /* This hides the top bar on mobile devices */
        }
    }

    /* NAV PUSHED DOWN FOR TOP BAR */
    header {
        padding-top: 38px !important; /* For Desktop */
    }

    @media screen and (max-width: 768px) {
        header {
            padding-top: 12px !important; /* For Mobile */
        }
    }

    /* NAV NO SHADOW */
    #header-outer {
        box-shadow: none !important;
    }

    /* HOME intro intro header */
    .intro {
        text-transform: uppercase !important;
        font-family: "Sweet-Sans-Pro", sans-serif !important;
        font-weight: 700 !important;
        font-size: 14px !important;
    }

    /* alle BUTTONs font */
    div.nectar-cta.button-sweet .text {
        text-transform: uppercase !important;
        font-family: "Sweet-Sans-Pro", sans-serif !important;
    }

    /* HOME H1 closer to intro header - Desktop */
    @media screen and (min-width: 992px) {
        h1 {
            margin-top: -11px !important;
        }
    }

    /* HOME H1 closer to intro header - Mobile */
    @media screen and (max-width: 991px) {
        h1 {
            margin-top: -5px !important;
        }
    }

    /* HOME Header pop-up Woocommerce */
    .single-product div.product h1.product_title {
      font-family: 'juana' !important;
      font-size: 22px !important;
    }

    .nectar-quick-view-box .product_title {
      font-family: 'juana' !important;
      font-size: 40px !important;
    }

    /* FAQ Header */
    .FAQ-juana h3 {
        font-family: 'juana'!important;
        font-weight: normal !important;
    }

    /* SHOP subheaders filter styling */
    #sidebar .wc-blocks-filter-wrapper h3.wp-block-heading {
        font-size: 14px;
    }

    /* SHOP filter by price fileld circles */
    div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-webkit-slider-thumb {
      background: black;
    }
    div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-moz-range-thumb {
      background: black;
    }

    /* SHOP Price filter more elegant */
    .wc-block-components-price-slider__range-input-wrapper:before{
        background:transparent !important;
    }
    .wc-block-components-price-slider__range-input-progress{
        height:2px !important;
        top:-50% !important;
    }
    div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-webkit-slider-thumb {
        height:4px;
        width:4px;
    }

    /* SHOP Checkboxes more thin */
    .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{
        border:1px solid black !important;
    }

    /* HOME - SHOP Prices size */
    .home .woocommerce ul.products li.product.material .price, .home .woocommerce ul.products li.product .price, 
    .home .woocommerce ul.products li.product.material .price .woocommerce-Price-amount {
      font-size: 17px !important;
    }

    /* SHOP Product Title on product page */
    .single-product div.product h1.product_title {
        font-size: 32px !important;
    }

    /* SHOP Product Price  */
    .single-product.woocommerce div.product .summary p.price {
      font-size: 15px;
    }

    /* SHOP No bullshit below pictures  */
    div#tab-additional_information {
     display: none !important;
     }
     
     /* SHOP 'Related products'  */
     #ajax-content-wrap .related.products > h2,#ajax-content-wrap .upsells.products > h2,#ajax-content-wrap #tab-reviews #reviews #comments h2,.woocommerce .woocommerce-tabs #tab-additional_information h2,#ajax-content-wrap #reviews #reply-title,.woocommerce-tabs #reviews .nectar-average-count,#review_form_wrapper.modal .comment-reply-title,.woocommerce-tabs[data-tab-style="fullwidth_stacked"] p.woocommerce-noreviews {
        font-family: 'juana' !important;
    }

    Attached files:  Screenshot 2023-07-06 at 15.06.47.jpg

  •  2,958
    Andrew replied

    Hello again,

    Thank you for getting back to us.

    Try adding this CSS and let us know how that goes.

    @media only screen and (min-width: 1px) and (max-width: 999px) {
      body #header-outer {
          padding: 12px 0 23px;
      }
    }
    

    Best regards,

  •  16
    Soluforyou replied

    Perfect, thanks Andrew!