There are no notes for this item.

<div class="global-container">

    <header class="siteheader" id="top">

        <div class="preheader">
            <div class="row">
                <div class="large-8 small-12 columns align-middle">
                    <ul>
                        <li class="active"><a href="/" title="Home">Home</a></li>
                        <li><a href="extras/" title="Extras">Extras</a></li>
                        <li><a href="https://docs.modmore.com/en/index.html" title="Documentation">Documentation</a></li>
                        <li><a href="http://demo.modmore.com/" title="Demos">Demos</a></li>
                        <li><a href="https://support.modmore.com/" title="Support">Support</a></li>
                        <li><a href="https://forum.modmore.com/" title="Forum">Forum</a></li>
                        <li><a href="https://sitedash.app/?utm_source=modmoreprenav" title="SiteDash">SiteDash</a></li>
                    </ul>
                </div>

                <div class="large-4 small-12 columns header-account-links small-text-center">
                    <a href="https://modmore.com/account/" title="Your Account"><img class="userimg" src="//www.gravatar.com/avatar/ec08b93facdaf8489dde4404bc351c01?s=32&amp;d=mm" width="32" height="32" alt="marcjenkins's avatar"> marcjenkins</a>

                    <button class="minicart-summary" type="button" data-link="minicart">
                        <svg role="img" class="minicart-summary__icon">
                            <use xlink:href="/svg/svg-symbols.svg#simplecart"></use>
                        </svg>
                        2 <span class="visually-hidden">items</span>
                    </button>

                    <div class="minicart" id="minicart">
                        <div class="minicart__body">
                            <ul class="minicart__list">
                                <li class="minicart-item">
                                    <div class="minicart-item__product">
                                        <h3 class="minicart-item__name">Commerce Single License</h3>
                                        <p class="minicart-item__quantity">
                                            Quantity: 1
                                        </p>
                                    </div>
                                    <div class="minicart-item__numbers">
                                        <span class="minicart-item__subtotal">€299.00</span>
                                    </div>
                                </li>
                                <li class="minicart-item">
                                    <div class="minicart-item__product">
                                        <h3 class="minicart-item__name">Redactor Subscription</h3>
                                        <p class="minicart-item__quantity">
                                            Quantity: 5
                                        </p>
                                    </div>
                                    <div class="minicart-item__numbers">
                                        <span class="minicart-item__subtotal">€125.00</span>
                                    </div>
                                </li>
                                <li class="minicart-item">
                                    <div class="minicart-item__product">
                                        <h3 class="minicart-item__name">MoreGallery Single License</h3>
                                        <p class="minicart-item__quantity">
                                            Quantity: 1
                                        </p>
                                    </div>
                                    <div class="minicart-item__numbers">
                                        <span class="minicart-item__subtotal">€50.00</span>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="minicart__summary">
                            <div class="minicart__total">
                                <span class="minicart__total-label">Total:</span>
                                <span class="minicart__total-value">€474.00</span>
                            </div>
                        </div>

                        <form class="minicart__footer" method="post" action="checkout/">
                            <input type="hidden" name="checkout" value="1">

                            <div class="btn-group">
                                <a href="cart.html" class="btn btn--secondary">Cart</a>
                                <button type="submit" href="checkout/" class="btn btn--primary">Checkout</button>
                            </div>

                        </form>
                    </div>

                </div>
            </div>
        </div>

        <div class="row">
            <div class="large-3 medium-12 small-12 columns">
                <a href="https://modmore.com/" class="logo">
                    <svg role="img">
                        <use xlink:href="/svg/svg-symbols.svg#modmore-logo"></use>
                    </svg>
                    <span class="visually-hidden">modmore</span>
                </a>
            </div>

            <nav class="large-9 medium-12 small-12 columns">
                <ul>
                    <li class="first"><a href="/extras/" title="Powerful Extras for MODX Revolution">Extras</a></li>
                    <li><a href="/consults/" title="MODX Consults">Consults</a></li>
                    <li><a href="/about/" title="About">About</a></li>
                    <li><a href="/blog/" title="Blog">Blog</a></li>
                    <li class="last"><a href="/account/" title="Account" data-loggedin="true">Account</a></li>
                </ul>
            </nav>
        </div>

        <div class="row print-only">
            Printed: <ul class="B_crumbBox"></ul>
        </div>

    </header>
/* No context defined for this component. */
  • Content:
    /*------------------------------------*\
    	Global header
    \*------------------------------------*/
    
    .header-account-links {
    	position: relative;
    	display: flex;
    	align-items: center;
    	justify-content: flex-end;
    }
    
    .minicart-summary {
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	height: 30px;
    	border-radius: 8px;
    	margin-left: 20px;
    	background: $color-primary;
    	border: 1px solid $color-primary;
    	font-weight: bold;
    	cursor: pointer;
    
    	&:hover,
    	&.is-active {
    		border: 1px solid rgba(255,255,255,0.5);
    	}
    }
    
    .minicart-summary__icon {
    	height: 100%;
    	width: 100%;
    	max-height: 20px;
    	max-width: 20px;
    	margin-right: 5px;
    	margin-top: 2px;
    }
    
  • URL: /components/raw/global-header/global-header.scss
  • Filesystem Path: components/02-components/global-header/global-header.scss
  • Size: 661 Bytes