Padding on mobile menu

  • Resolved px2

    (@px2)


    4 years, 3 months ago

    Hi, I’m using the theme for the first time.

    On this site I have added padding-top to the menu – but I don’t want this much padding on the mobile menu – how can I change the padding on mobile menu to 10px please – but keep the main full screen padding at 90px?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author CrestaProject

    (@crestaproject)

    Hi @px2
    sure! Try to use this CSS code:

    
@media all and (max-width: 1025px) {
	header.site-header:not(.menuMinor) .main-navigation >div >ul >li:not(.attesaMenuButton) >a {
		padding-top: 10px;
	}
}

    This will insert a 10px padding top on mobile and tablet

    Thread Starter px2

    (@px2)

    Hi, thanks for the quick reply, the mobile and tablet menu still have 90px padding unfortunately, I think this bit of extra CSS I added to make the top menu have 90px is also being used on the mobile/tablet menu, I added your code below it:

    header.site-header:not(.menuMinor) .main-navigation >div >ul >li:not(.attesaMenuButton) >a {
    color: #18278C;
    padding-top: 90px;
    }

    @media all and (max-width: 1025px) {
    header.site-header:not(.menuMinor) .main-navigation >div >ul >li:not(.attesaMenuButton) >a {
    padding-top: 10px;
    }

    Theme Author CrestaProject

    (@crestaproject)

    Hi @px2
    try adding an “!important” to the code I gave you earlier, like this:

    
@media all and (max-width: 1025px) {
	header.site-header:not(.menuMinor) .main-navigation >div >ul >li:not(.attesaMenuButton) >a {
		padding-top: 10px !important;
	}
}
    Thread Starter px2

    (@px2)

    Thank you, I added your code, I also changed the existing header code to read this:

    @media all and (min-width: 1025px) {
    header.site-header:not(.menuMinor) .main-navigation >div >ul >li:not(.attesaMenuButton) >a {
    color: #18278C;
    padding-top: 90px;
    }

    And it works now! The code I had already added was counteracting the new snippet, but all looks good now.

    Thanks for the help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Padding on mobile menu’ is closed to new replies.