1 reply · opened Jul 19, 2022
I want to use two header.
One for mobile use only and one for PC use only.
However, since it is a header with an ID value, it is impossible to use two.
Is there a way?
`<header id="header" class="transparent-header border-0 d-block d-lg-none" data-sticky-class="not-dark" data-sticky-shrink="false" " >
...</header>
<header id="header" class="header-size-sm d-none d-lg-block" data-sticky-shrink="false">
...
</header>
Hello,
Thanks for your Patience!
Currently, you cannot use multiple #header DIV due to the HTML Structure. However, you can consider using multiple .header-row DIVs and display one on Desktops and one on Mobile Devices. However, do note that the #logo is also an ID and you will need to use a Custom Image as a Logo.
Consider trying the following code:
[ch_pre]<!-- Header
============================================= -->
<header id="header" class="full-header">
<div id="header-wrap">
<div class="container">
<!-- Display on Desktop -->
<div class="header-row d-none d-lg-flex">
<!-- Logo
============================================= -->
<div id="logo">
[
](index.html)
</div><!-- #logo end -->
<div class="header-misc">
<!-- Top Search
============================================= -->
<div id="top-search" class="header-misc-icon">
[](#)
</div><!-- #top-search end -->
<!-- Top Cart
============================================= -->
<div id="top-cart" class="header-misc-icon d-none d-sm-block">
[5](#)
<div class="top-cart-content">
<div class="top-cart-title">
<h4>Shopping Cart</h4>
</div>
<div class="top-cart-items">
<div class="top-cart-item">
<div class="top-cart-item-image">
[
](#)
</div>
<div class="top-cart-item-desc">
<div class="top-cart-item-desc-title">
Blue Round-Neck Tshirt with a Button
<span class="top-cart-item-price d-block">$19.99</span>
</div>
<div class="top-cart-item-quantity">x 2</div>
</div>
</div>
<div class="top-cart-item">
<div class="top-cart-item-image">
</div>
<div class="top-cart-item-desc">
<div class="top-cart-item-desc-title">
Light Blue Denim Dress
<span class="top-cart-item-price d-block">$24.99</span>
</div>
<div class="top-cart-item-quantity">x 3</div>
</div>
</div>
</div>
<div class="top-cart-action">
<span class="top-checkout-price">$114.95</span>
View Cart
</div>
</div>
</div><!-- #top-cart end -->
</div>
<!-- Primary Navigation
============================================= -->
<nav class="primary-menu">
<ul class="menu-container">
<li class="menu-item">
[Home](index.html)
<li class="menu-item">
[Features](index.html)
<li class="menu-item">
[Pricing](index.html)
<li class="menu-item">
[Blog](index.html)
<li class="menu-item">
[Contact](index.html)
</nav><!-- #primary-menu end -->
<form class="top-search-form" action="search.html" method="get">
<input type="text" name="q" class="form-control" value="" placeholder="Type & Hit Enter.." autocomplete="off">
</form>
</div>
<!-- Display on Mobile -->
<div class="header-row d-flex d-lg-none justify-content-between">
<!-- Logo
============================================= -->
<div class="d-flex">
[
](#)
</div>
<!-- #logo end -->
<div id="primary-menu-trigger">
<svg class="svg-trigger" viewBox="0 0 100 100"><path d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20"></path><path d="m 30,50 h 40"></path><path d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20"></path></svg>
</div>
<!-- Primary Navigation
============================================= -->
<nav class="primary-menu">
<ul class="menu-container">
<li class="menu-item">
[Home](index.html)
<li class="menu-item">
[Features](index.html)
<li class="menu-item">
[Pricing](index.html)
<li class="menu-item">
[Blog](index.html)
<li class="menu-item">
[Contact](index.html)
</nav><!-- #primary-menu end -->
<form class="top-search-form" action="search.html" method="get">
<input type="text" name="q" class="form-control" value="" placeholder="Type & Hit Enter.." autocomplete="off">
</form>
</div>
</div>
</div>
</div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->[/ch_pre]
Currently, this is the only way. We will try adding more options for this in the future updates.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard