Sticky header challenges

6 replies · opened Feb 4, 2022

OOnly1BruceCFeb 4, 2022

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.

SSemicolon WebSTAFFFeb 6, 2022

Hello,

  1. Remove the .full-header Class and then use the following code instead:
    [ch_pre]

             ...

[/ch_pre]

  1. This is Definitely Possible. Consider using the Template attached.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

OOnly1BruceCFeb 7, 2022

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.

SSemicolon WebSTAFFFeb 8, 2022

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.

OOnly1BruceCFeb 8, 2022

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.

SSemicolon WebSTAFFFeb 8, 2022

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:
[ch_pre]

				[

attachment
](index.html)

attachment

  •                               [Home](https://website.com)
  •                               [About Us](#)
  •                               [Services](#)
  •                               [Gallery](#)
  •                               [Contact Us](contact.html)

[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

OOnly1BruceCFeb 8, 2022

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