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="[email protected] [email protected]">
    				<ul class="uk-subnav uk-subnav-divider uk-flex uk-flex-center [email protected] [email protected] uk-padding-small">
    					<li><a href="#">Cart</a></li>
    					<li><a href="#">Account</a></li>
    				</ul>
    			</div>
    			<div class="[email protected] [email protected] [email protected] 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 [email protected]">
    				<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 [email protected]">
    				<nav class="uk-navbar-container uk-navbar-transparent [email protected]" 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 [email protected]">
    					<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