Canvas Support

Custom Menu Height Problems

3 replies · opened Apr 28, 2022

KKennethLeoHodgesApr 28, 2022

Hello Again :)

HELP !!!!!!!!!

I got some things working, but others are broken now :( I have spent all day trying to get this Header perfect so I can FINALLY move on the the rest of the website build :(

  1. Want Menu Height and Logo Height to be 140px normal, and 70px mobile. (Working only XXL & XS - not in between sizes.)

  2. Want Logo to hang down below header by 24px (WORKING GREAT)

  3. The Header border-bottom (9px wide, red) ONLY shows when Sticky (sticky-header class active) now, but NOT at top (Header Class = "full-header dark") - When Header Class = "full-header dark sticky-header" - it WORKS). In Custom.css I added a lot of "!important" css lines for "border-bottom-color" - did I break something?

  4. The Header goes CRAZY when I resize in-between XXL and XS - sizes in between look horrible - menu misaligned.

  5. data-sticky-shrink="true" NOT WORKING any more.

  6. Mobile Phone Header/Menu (XS) works fine, EXCEPT Menu needs to be about 20px LOWER (touches LOGO). How to pad top of mobile menu only?

  7. On MOBILE ONLY HEADER/MENU, can I make "#logo img {bottom: -30 px;}"
    instead of "#logo img {bottom: -24px;}" like on desktop? EXAMPLE: (Desktop -24px, Mobile -30px). POSSIBLE?

I attached my Custom.css file in case it helps!

I apologize to keep bugging you, but this website is very important that I get it perfect. They will want over 100 retail websites like this IF I can copy their corporate website perfectly.

THANK YOU !!!

-Ken

SSemicolon WebSTAFFMay 2, 2022

Hello,

Thanks for your Patience!

  1. First, add the .header-size-custom Class to the #header Tag. Then you can use the following CSS Code:
    [ch_pre type="css"]/* Custom Header Size
    -----------------------------------------------------------------*/
    .header-size-custom #logo img {
    height: 70px;
    }

@media (min-width: 1200px) {

.header-size-custom .header-wrap-clone {
	height: calc( 140px + 1px );
}

#header.header-size-custom + .include-header {
	margin-top: calc( -140px - 2px );
}

.header-size-custom.sticky-header-shrink #header-wrap #logo img {
	height: 140px;
}

.header-size-custom .menu-container > .menu-item > .menu-link {
	padding-top: 94px; /* (140px - 22px)/2 */
	padding-bottom: 94px; /* (140px - 22px)/2 */
}

.header-size-custom.sticky-header-shrink .menu-container > .menu-item > .menu-link {
	padding-top: 94px; /* (140px - 22px)/2 */
	padding-bottom: 94px; /* (140px - 22px)/2 */
}

}[/ch_pre]

  1. Let us know if you need any help with this.

  2. We recommend not using !important if not necessary. Delete all other codes and just use this code:
    [ch_pre type="css"]#header-wrap {
    border-bottom: 9px solid rgba(143,10,10,1.00) !important;
    }[/ch_pre]

  3. This requires customization based on your requirements. Consider using something like this in HTML:
    [ch_pre]<nav class="primary-menu order-lg-1 col-lg px-0" style="position:inherit;">
    <nav class="primary-menu order-lg-3 col-lg px-0" style="position:inherit;">[/ch_pre]

and the following codes in the CSS:
[ch_pre type="css"]@media (min-width: 992px) and (max-width: 1199.98px) {
#logo img {
height: 90px;
}

.primary-menu {
	max-width: 325px;
}

}[/ch_pre]

  1. This is working We recommend checking the Documentation on Custom Header Heights: https://docs.semicolonweb.com/docs/header/header-heights/#docs-steps-custom-css which will help you setting the Custom Sticky Header Heights.

  2. Consider using the following CSS Code:
    [ch_pre type="css"]@media (max-width: 991.98px) {
    .primary-menu {
    margin-top: 20px;

    }

    .primary-menu + .primary-menu {
    margin-top: 0;

    }
    }[/ch_pre]

  3. Definitely Possible. Consider using the following code:
    [ch_pre type="css"]#logo img {
    bottom: -30px;
    }

@media (min-width: 992px) {
#logo img {
bottom: -24px;
}
}[/ch_pre]

Hope this Helps!

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

KKennethLeoHodgesMay 6, 2022

So helpful!!!!

I had to make a few minor adjustments, but this solved ALL the problems I was having with the HEADER area!!!

Very grateful for your team :)

THANK YOU :)

SSemicolon WebSTAFFMay 7, 2022

Glad the issues were resolved. Very Happy to Help! :)

Please let us know if we can help you with anything else.

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