Menu not being responsive

  • Resolved shaun7007

    (@shaun7007)


    9 years ago

    Hi,

    I am completing a CSS / HTML menu on site:
    https://www.mariasandy.com

    It looks alright in full screen, but shrink the browser and the menu items start to move down the page.

    This is the menu CSS, would someone please help me to get it maintain its position on the screen, when the browser is resized.
    I have a mobile menu sorted out, the problem is just on browsers that aren’t full screen.

    .main-navigation {
	background: url('images/nav.png') repeat-x;
	clear: both;
	display: block;
	float: left; /* CHANGED FROM none */
	width: 100%;
	height: 55px;
}
.main-navigation ul {
	font-size: 17px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left:25%;
	padding-right: 25%;
}
.main-navigation li {
	float: left;
	position: relative;
}
.main-navigation a {
	font-family: "adobe-garamond-pro";
	font-weight: 700;
	color: #fff;
	display: block;
	line-height: 42px;
	padding: 0 15px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: normal;
	text-shadow: 1px 1px 3px #222;
	letter-spacing: 1px;
	text-decoration: none;
}
.main-navigation ul ul {
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 42px;
	left: 0;
	width: 188px;
	z-index: 99999;
	text-align: center;
}
.main-navigation ul ul ul {
	left: 100%;
	top: 0;
}
.main-navigation ul ul a {
	background: #643a11;
	color: #fff;
	font-size: 13px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px;
	width: 168px;
	text-transform: capitalize;
	border-bottom: 1px solid #EFEFD2;
}
.main-navigation ul ul li:hover a ,
.main-navigation .sub-menu .current-menu-item > a,
.main-navigation .sub-menu .current-menu-ancestor > a,
.main-navigation .sub-menu .current_page_item > a,
.main-navigation .sub-menu .current_page_ancestor > a,
.main-navigation .sub-menu .current-page-ancestor > a {
	background: #845223;
	color:#FFF;
	text-shadow: 0 0 0 transparent;
}
.main-navigation li:hover > a,
.main-navigation ul ul :hover > a,
.main-navigation a:focus {
	/*background: url('images/hover.png');*/
	color:#422B14;
	text-shadow: 0 0 0 transparent;
}
.main-navigation ul li:hover > ul {
	display: block;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-page-ancestor > a {
	background: url('images/hover.png');
}

    I could align it with a DIV, but using a WordPress theme don’t know how to get a menu aligned.
    Thanks very much.

Viewing 5 replies - 1 through 5 (of 5 total)
  • mrtom414

    (@mrtom414)

    You want to use media queries to control how your site responses under different views. You need to spend some time studying media queries and responsive design.

    You should start with your smallest screens and develop toward larger screens. This is know as mobile first development.

    Here is an example of a media query. The query below would effect the code until the screen size reaches 400px. Sorry if this isn’t very helpful but it not as easy as just giving you code. You will need to test to see how your menu response at different screen sizes then write a query to adjust them as needed. 

    @media screen and (max-width:400px){

}
    Thread Starter shaun7007

    (@shaun7007)

    Thanks for the advice mrtom414 !

    Thread Starter shaun7007

    (@shaun7007)

    Hi, I’m having trouble applying the

    @media screen

    container to the

    .menu-navigation
    class.

    Where do I apply the control, and do I need to pick up classes from the HTML, or just apply @media screen to my CSS code?

    Thanks,
    Shaun.

    mrtom414

    (@mrtom414)

    If your going to do mobile first you will want to set all your default setting to your mobile view. If you then wanted to have the screen adjust at 420 pixels you would use the following statement. 

    @media screen and (max-width:420px){

}

    You would want to place all the code you wanted to change between the brackets
    example

    @media screen and (max-width:420px) {
 .menu-navigation li{
                     float:left;
                     ....
                    }
}

    you would continue doing this for each view you want to change for example if you wanted to change the menu navigation again at 640px you would create a media query for 620px

    @media screen and (min-width:421px) and  (max-width:640px{
    .menu-navigation{
                     .......
                    }
}

    You would just place the rules that need to be changed in the media query.

    here a link to a webschool tutorial hope it helps

    https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    Thread Starter shaun7007

    (@shaun7007)

    Thanks that was a lot of help, really appreciate it!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Menu not being responsive’ is closed to new replies.