I have two issues I can’t seem to figure out with this project.
(1) I can’t remove the borders from the header.
My most recent attempt is:
#header .full-header .header-size-custom .dark #primary-menu > ul { border-right: 0; }
(2) I can’t center the logo above the menu and then center the menu.
Hello,
.full-header Class and then use the following code instead:<header id="header">
<div id="header-wrap">
<div class="container-fluid px-4">
<div class="header-row">
...
</div>
</div>
</div>
</header>Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
I used your suggestion, however, I can't get the header to NOT shrink on scroll. I want the header to remain exactly as it is all the time.
I've added the data-sticky-shrink="false" to the header, but it doesn't work.
Hello,
We have just checked out your Website: https://bdc-root.com/MensClubBarbershop/ and the data-sticky-shrink="false" Attribute appears to be working fine for us. However, if this is still not working for you, can you please provide us with a Live URL of the Page you are facing this issue on, so that we can check out the exact issue and provide you with more accurate assistance on this. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
I don't think you understood my issue. I said "I can’t get the header to NOT shrink on scroll. I want the header to remain exactly as it is all the time." When I scroll, the logo goes off the screen - see attached files before scroll and after scroll. I can't stop the logo from goes off-screen during scroll.
Hello,
Apologies for the misunderstanding but the data-sticky-shrink="false" has a different functionality which shrinks the size of the Header. The behavior you are looking for requires you to enclose both the .header-row DIV's that includes Logo Area and the Primary Menus inside the #header-wrap DIV. You will notice that the File we sent you earlier does exactly this.
You can consider using this code:
<!-- Header
============================================= -->
<header id="header" class="header dark header-size-custom" data-sticky-shrink="false">
<div id="header-wrap">
<div class="container">
<div class="header-row">
<!-- Logo
============================================= -->
<div id="logo" class="mx-auto">
<a href="index.html" class="standard-logo" dark-logo="images/logo.png"><img src="images/logo.png" alt="Men's Club Barbershop Logo"></a>
<a href="index.html" class="retina-logo" dark-logo="images/logo-@2x.png"><img src="images/logo@2x.png" alt="Retina verison of Men's Club Barbershop Logo"></a>
</div><!-- #logo end -->
</div>
</div>
<div class="container">
<div class="header-row justify-content-between flex-row-reverse flex-lg-row">
<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 mx-auto">
<ul class="menu-container">
<li class="menu-item current">
<a class="menu-link" href="https://website.com"><div>Home</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="#"><div>About Us</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="#"><div>Services</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="#"><div>Gallery</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact.html"><div>Contact Us</div></a>
</li>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Perfect, Thanks!
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