[Antonio Crutchley]

Hi Sakin,

Thanks for that. It works fine. But how do you find or come up with that ID for the form?

 

Thanks

[Antonio Crutchley]

Hey @minal,

Thanks for your feedback. Since I can’t add a button to the header of non-home pages, is it possible to remove the auto-generated header and create my own?

 

Thanks,

Antonio

[Antonio Crutchley]

Hello @sujeet – this is a lot of codes without any explanation. I copied it all and added it to my custom CSS, but it didn’t do anything.

This is how I solve the problem:
<div>/*** Hide hamburger menu on screen width 480px and above ****/</div>
<div>@media only screen and (min-width: 30em) {</div>
<div>    .menu-toggle {</div>
<div>        padding: 20px 10px;</div>
<div>        visibility: hidden;</div>
<div>  position: absolute;</div>
<div>    }</div>
<div>}</div>
<div></div>
<div>/*** Display horizontal menu on screen width 480px and above ****/</div>
<div>@media only screen and (min-width: 30em) {</div>
<div>.main-navigation ul, .top-navigation ul, .secondary-navigation ul,  .navigation-classic .main-navigation a, .site-secondary-header-menu .secondary-navigation a {</div>
<div>   Display: flex;</div>
<div>padding: 0 14px;</div>
<div>}</div>
<div>}</div>
<div></div>
<div>/*** Set menu padding and line-height on screen width 480px and above ****/</div>
<div>@media only screen and (min-width: 30em) {</div>
<div>.navigation-classic .main-navigation a, .site-secondary-header-menu .secondary-navigation a {</div>
<div>        padding: 14px 14px;</div>
<div>        line-height: 1;</div>
<div>}</div>
<div>}</div>
<div></div>
<div>/*** Set menu active border color on screen width 480px and above ****/</div>
<div>@media only screen and (min-width: 30em) {</div>
<div>    .navigation-classic .main-navigation .menu > .current-menu-item > a:before, .navigation-classic .main-navigation .menu > .current-menu-ancestor > a:before {</div>
<div>        content: “”;</div>
<div>        border-bottom: 2px solid;</div>
<div>        position: absolute;</div>
<div>        left: 20px;</div>
<div>        bottom: 0;</div>
<div>        width: calc(100% – 40px);</div>
<div>        height: 1px;</div>
<div>  border-bottom-color: #fc7993;</div>
<div>    }</div>
<div>}</div>
<div></div>
<div>/*** Remove top padding from header menu and increase bottom padding ****/</div>
<div>.site-header-menu .main-navigation, .top-navigation, .secondary-navigation {</div>
<div>    /* padding: 14px 0; */</div>
<div>  padding-top: 0 !important;</div>
<div>    padding-bottom: 16px !important;</div>
<div>}</div>
<div></div>
<div>I hope you didn’t spend much time writing all those codes. Either way, thanks for responding!</div>
<div></div>

[Antonio Crutchley]

Hello @minal – thanks for your solution. It works excellent for screens 1200px wide and greater. Anything under 1200px and it returns to hamburger.

[Author]

Posts