UIkit 3 Two Columns Navigation Bar with Mobile Navigation

This UIkit snippet, was created to help web designers, front-end developers and back-end developer save time. Use it in your project and build your app faster, You can also download the HTML, CSS, and JS code.

Build with UIkit 3.3.7 in Header, update June 17, 2020

  • <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
    
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
    
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
    
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
    
    <div class="uk-section uk-padding-remove-vertical">
    	<div class="uk-container">
    		<div class="uk-grid">
    			<div class="uk-width-1-2@m uk-width-1-2@s">
    				<ul class="uk-subnav uk-subnav-divider uk-flex uk-flex-center uk-flex-left@m uk-flex-left@s uk-padding-small">
    					<li><a href="#">Cart</a></li>
    					<li><a href="#">Account</a></li>
    				</ul>
    			</div>
    			<div class="uk-width-1-2@m uk-width-1-2@s uk-visible@s uk-padding-small">
    				<div class="uk-flex uk-flex-right">
    					<a href="#" class="uk-button uk-button-default uk-button-small uk-border-rounded uk-margin-small-right">Login</a>
    					<a href="#" class="uk-button uk-button-primary uk-button-small uk-border-rounded">Register</a>
    				</div>
    			</div>
    			<div class="uk-width-1-1">
    				<hr class="uk-margin-remove-top">
    			</div>
    		</div>
    		<div class="uk-grid uk-margin-remove-top">
    			<div class="uk-width-1-2 uk-width-expand@m">
    				<div class="uk-flex uk-flex-middle">
    					<a class="uk-logo uk-navbar-item" href="#">
    						<img src="https://uikitbase.com/library/logo-dark.png" data-src="https://uikitbase.com/library/logo-dark.png" alt="Logo" uk-img>
    					</a>
    				</div>
    			</div>
    			<div class="uk-width-1-2 uk-width-auto@m">
    				<nav class="uk-navbar-container uk-navbar-transparent uk-visible@m" uk-navbar>
    					<ul class="uk-navbar-nav">
    						<li class="uk-active"><a href="#">Home</a></li>
    						<li>
    							<a href="#">Services</a>
    							<div class="uk-navbar-dropdown">
    								<ul class="uk-nav uk-navbar-dropdown-nav">
    									<li><a href="#">Ocean freight forwarding</a></li>
    									<li><a href="#">Customs house brokerage</a></li>
    									<li><a href="#">Transportation & Distribution</a></li>
    								</ul>
    							</div>
    						</li>
    						<li><a href="#">News</a></li>
    						<li><a href="#">About Us</a></li>
    						<li><a href="#">Contacts</a></li>
    					</ul>
    				</nav>
    				<div class="uk-height-1-1 uk-flex uk-flex-right uk-flex-middle uk-hidden@m">
    					<a class="uk-button" href="#modal-mobile-nav" uk-toggle>
    						<span uk-navbar-toggle-icon></span>
    					</a>
    				</div>
    				<div id="modal-mobile-nav" class="uk-modal-full" uk-modal>
    					<div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
    						<button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
    						<div class="uk-width-large uk-padding-large">
    							<ul class="uk-nav-primary uk-nav-parent-icon" uk-nav>
    								<li class="uk-active"><a href="#">Home</a></li>
    								<li class="uk-parent">
    									<a href="#">Services</a>
    									<ul class="uk-nav-sub">
    										<li><a href="#">Ocean freight forwarding</a></li>
    										<li><a href="#">Customs house brokerage</a></li>
    										<li><a href="#">Transportation & Distribution</a></li>
    									</ul>
    								</li>
    								<li><a href="#">News</a></li>
    								<li><a href="#">About Us</a></li>
    								<li><a href="#">Contacts</a></li>
    							</ul>
    							<a href="#" class="uk-button uk-button-primary uk-border-rounded uk-align-center">Login</a>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
  • <!-- CSS -->
  • <!-- JS -->

LEAVE A COMMENT

Your email address will not be published.

Related Snippets