Home Forums SimpleFlex Cart placement in nav-menu

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  latte 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #46493

    latte
    Participant

    Hello!
    I have placed a shopping-cart right after my nav-menu. But I am experiencing issues regarding the placement when the nav-menu shifts from header[role=’banner’] to header[role=’banner’].scrolled and mobile version. The padding-top becomes to big and the cart occurs underneath the nav-menu.

    This is my header.php

        <nav id="nav" class="navbar navbar-fixed-top <?php echo get_option('_dw_page_navbar_class'); ?>" >
            <div class="navbar-inner">
                <div class="container">
    
                    <div class="cart-placement">
                        <?php do_action( 'your_theme_header_top' ); ?>
                    </div>
                                    
                    <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>    
    
                            <?php dw_page_generate_menu(); ?>
                </div>
            </div>    
        </nav>

    This is the relevant css:

    /* CART */
    .cart-contents:before {
        font-family:WooCommerce;
        content: "\e01d";
        font-size:28px;
        margin-top:10px;
        font-style:normal;
        font-weight:400;
        padding-right:5px;
        vertical-align: bottom;
    }
    .cart-contents:hover {
        text-decoration: none;
    }
    .cart-contents-count {
        color: #fff;
        background-color: #2ecc71;
        font-weight: bold;
        border-radius: 10px;
        padding: 1px 6px;
        line-height: 1;
        font-family: Arial, Helvetica, sans-serif;
        vertical-align: top;
    }
    
    .cart-placement {
      float: right;
      padding-top: 40px; <--- THIS PADDING SHOULD SOMEHOW BE DYNAMIC
      padding-bottom: 10px;
      padding-left: 15px;
      display: inline-block;
    }
    
    a.cart-contents {
      color: #ff7454 !important;  
    }
    
    

    Thank you!

    • This topic was modified 1 month ago by  latte.
    #46495

    Joshua
    Keymaster

    Could you post a link to your site please? It won’t be possible to help without seeing the output.

    #46496

    latte
    Participant
    This reply has been marked as private.
    #46497

    Joshua
    Keymaster

    It’s probably best to set the line-height of the item for regular and scrolled and remove any manual padding in addition to setting the contents div to baseline.

    The important items in the below CSS are the set line heights which represent your unscrolled and scrolled header heights.

    .cart-placement {
        float: right;
        display: inline-block;
        line-height: 100px;
        padding: 0;
    }
    header.scrolled .cart-placement {
        float: right;
        padding-top: 15px;
        padding-bottom: 10px;
        padding-left: 15px;
        display: inline-block;
        line-height: 50px;
        padding: 0;
    }
    .cart-contents-count {
        color: #fff;
        background-color: #2ecc71;
        font-weight: bold;
        border-radius: 10px;
        padding: 1px 6px;
        line-height: 1;
        font-family: Arial, Helvetica, sans-serif;
        vertical-align: baseline;
    }
    #46498

    latte
    Participant

    That’s it! Thank you again :)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.