Drop Down Menu Issues after changing margins

  • Resolved orangeblowfish

    (@orangeblowfish)


    11 years, 10 months ago

    Hi,

    I wanted to remove the white space below the menu and entered the following code

    #main {
		margin-top: -2rem;
		margin-bottom: -2rem;
}

    It removed the white space below the menu, but now i can’t access the menu buttons unless i hover over the top half of the button and the drop down menus are vissble but are unusable

    Please help!!

    my site is here

Viewing 4 replies - 1 through 4 (of 4 total)

  • Try this instead

    @media screen and (min-width: 600px) {
	.main-navigation {position:relative;z-index:2;}
	#main {margin-bottom:-1rem;margin-top:-1.7rem;z-index:1;}
}

    and please note that TwentyTwelve is responsive and mobi first, so your current changes needs to be wrapped in a proper media query, check your site in small screen to see the issue.

    As a side note, the background image and the logo should be saved as 8 bit png, and it will be greatly reduced in size, your page will loads faster.

    Thread Starter orangeblowfish

    (@orangeblowfish)

    Paulwpxp that worked awesome!! you are a real life saver!

    I will also save header and logo as 8bit png

    you mentioned about my changes not working on a small screen and i just checked and it comes out really bad! how do i wrap up my current changes in a media query?

    again thank you for the advice as i am new to css and html!

    All of that is purely CSS matter.

    This theme has 2 break points: normal (mobile or small screen) up to before 600px and then 960px.

    It’s just a matter of putting the changes into the proper section of media query. TwentyTwelve is not just responsive but it’s on mobi first principle, so any CSS declared normally will take effect in mobi (small screen) and whatever is in the @media will take effect only in that screen width.

    Thread Starter orangeblowfish

    (@orangeblowfish)

    thanks paulwpxp i did some late night reading and did some changes to each set of changes i made on the css to make them fit based on the media device size!
    again thank you for all your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Drop Down Menu Issues after changing margins’ is closed to new replies.