Retractable menu breaks css properties when triggered

Asked

Viewed 541 times

2

/*

Responsive Mobile Menu v1.0
Plugin URI: responsivemobilemenu.com

Author: Sergio Vitov
Author URI: http://xmacros.com

License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/

*/

function responsiveMobileMenu() {	
		$('.rmm').each(function() {
			
			
			
			$(this).children('ul').addClass('rmm-main-list');	// mark main menu list
			
			
			var $style = $(this).attr('data-menu-style');	// get menu style
				if ( typeof $style == 'undefined' ||  $style == false )
					{
						$(this).addClass('graphite'); // set graphite style if style is not defined
					}
				else {
						$(this).addClass($style);
					}
					
					
			/* 	width of menu list (non-toggled) */
			
			var $width = 0;
				$(this).find('ul li').each(function() {
					$width += $(this).outerWidth();
				});
				
			// if modern browser
			
			if ($.support.leadingWhitespace) {
				$(this).css('max-width' , $width*1.05+'px');
			}
			// 
			else {
				$(this).css('width' , $width*1.05+'px');
			}
		
	 	});
}
function getMobileMenu() {

	/* 	build toggled dropdown menu list */
	
	$('.rmm').each(function() {	
				var menutitle = $(this).attr("data-menu-title");
				if ( menutitle == "" ) {
					menutitle = "Menu";
				}
				else if ( menutitle == undefined ) {
					menutitle = "Menu";
				}
				var $menulist = $(this).children('.rmm-main-list').html();
				var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>";
				$(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");

		});
}

function adaptMenu() {
	
	/* 	toggle menu on resize */
	
	$('.rmm').each(function() {
			var $width = $(this).css('max-width');
			$width = $width.replace('px', ''); 
			if ( $(this).parent().width() < $width*1.05 ) {
				$(this).children('.rmm-main-list').hide(0);
				$(this).children('.rmm-toggled').show(0);
			}
			else {
				$(this).children('.rmm-main-list').show(0);
				$(this).children('.rmm-toggled').hide(0);
			}
		});
		
}

$(function() {

	 responsiveMobileMenu();
	 getMobileMenu();
	 adaptMenu();
	 
	 /* slide down mobile menu on click */
	 
	 $('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
	 	if ( $(this).is(".rmm-closed")) {
		 	 $(this).find('ul').stop().show(300);
		 	 $(this).removeClass("rmm-closed");
	 	}
	 	else {
		 	$(this).find('ul').stop().hide(300);
		 	 $(this).addClass("rmm-closed");
	 	}
		
	});	

});
	/* 	hide mobile menu on resize */
$(window).resize(function() {
 	adaptMenu();
});
/*

Responsive Mobile Menu v1.0
Plugin URI: responsivemobilemenu.com

Author: Sergio Vitov
Author URI: http://xmacros.com

License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/

*/

.rmm {
	display:block;
	position:relative;
	width:100%;
	padding:0px;
	margin:0 auto !important;
	text-align: center;
	line-height:19px !important;
}
.rmm * {
	-webkit-tap-highlight-color:transparent !important;
	font-family:Arial;
}
.rmm a {
	color:#ebebeb;
	text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
	margin:0px;
	padding:0px;
}
.rmm ul {
	display:block;
	width:auto !important;
	margin:0 auto !important;
	overflow:hidden;
	list-style:none;
}


/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
	display:none !important;
	height:0px !important;
	width:0px !important;
}
/* */


.rmm .rmm-main-list li {
	display:inline;
	padding:padding:0px;
	margin:0px !important;
}
.rmm-toggled {
	display:none;
	width:100%;
	position:relative;
	overflow:hidden;
	margin:0 auto !important;
}
.rmm-button:hover {
	cursor:pointer;
}
.rmm .rmm-toggled ul {
	display:none;
	margin:0px !important;
	padding:0px !important;
}
.rmm .rmm-toggled ul li {
	display:block;
	margin:0 auto !important;
}




/* GRAPHITE STYLE */

.rmm.graphite .rmm-main-list li a {
	display:inline-block;
	padding:8px 30px 8px 30px;
	margin:0px -3px 0px -3px;
	font-size:15px;
	text-shadow:1px 1px 1px #333333;
	background-color:#444444;
	border-left:1px solid #555555;
	background-image:url('../rmm-img/graphite-menu-bg.png');
	background-repeat:repeat-x;
}
.rmm.graphite .rmm-main-list li a:hover {
	background-image:url('../rmm-img/graphite-menu-bg-hover.png');
}
.rmm.graphite .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rmm.graphite .rmm-main-list li:last-child a {
	-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.rmm.graphite .rmm-toggled {
	width:95%;
	background-color:#555555;
	min-height:36px;
	border-radius:6px;
}
.rmm.graphite .rmm-toggled-controls {
	display:block;
	height:36px;
	color:white;
	text-align:left;
	position:relative;
	background-image:url('../rmm-img/graphite-menu-bg.png');
	background-repeat:repeat-x;
	border-radius:6px;
}
.rmm.graphite .rmm-toggled-title {
	position:relative;
	top:9px;
	left:15px;
	font-size:16px;
	color:white;
	text-shadow:1px 1px 1px black;
}
.rmm.graphite .rmm-button {
	display:block;
	position:absolute;
	right:15px;
	top:8px;
}

.rmm.graphite .rmm-button span {
	display:block;
	margin-top:4px;
	height:2px;
	background:white;
	width:24px;
}
.rmm.graphite .rmm-toggled ul li a {
	display:block;
	width:100%;
	background-color:#555555;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #333333;
	border-top:1px solid #777777;
	text-shadow:1px 1px 1px #333333;
}
.rmm.graphite .rmm-toggled ul li a:active {
	background-color:#444444;
	border-bottom:1px solid #444444;
	border-top:1px solid #444444;
}



/* SAPPHIRE STYLE */

.rmm.sapphire .rmm-main-list li a {
	display:inline-block;
	padding:8px 30px 8px 30px;
	margin:0px -3px 0px -3px;
	font-size:15px;
	text-shadow:1px 1px 1px #3e587b;
	background-color:#537b9f;
	border-left:1px solid #3e587b;
	background-image:url('../rmm-img/sapphire-menu-bg.png');
	background-repeat:repeat-x;
}
.rmm.sapphire .rmm-main-list li a:hover {
	background:#3e597b;
}
.rmm.sapphire .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.rmm.sapphire .rmm-main-list li:last-child a {
	-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.rmm.sapphire .rmm-toggled {
	width:95%;
	background-color:#537b9f;
	min-height:36px;
	border-radius:6px;
}
.rmm.sapphire .rmm-toggled-controls {
	display:block;
	height:36px;
	color:white;
	text-align:left;
	position:relative;
	background-image:url('../rmm-img/sapphire-menu-bg.png');
	background-repeat:repeat-x;
	border-radius:5px;
}
.rmm.sapphire .rmm-toggled-title {
	position:relative;
	top:9px;
	left:15px;
	font-size:16px;
	color:white;
	text-shadow:1px 1px 1px #3e587b;
}
.rmm.sapphire .rmm-button {
	display:block;
	position:absolute;
	right:9px;
	top:7px;
	width:20px;
	padding:0px 7px 0px 7px;
	border:1px solid #3e587b;
	border-radius:3px;
	background-image:url('../rmm-img/sapphire-menu-bg.png');
	background-position:top;
}

.rmm.sapphire .rmm-button span {
	display:block;
	margin:4px 0px 4px 0px;
	height:2px;
	background:white;
	width:20px;
}
.rmm.sapphire .rmm-toggled ul li a {
	display:block;
	width:100%;
	background-color:#537698;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #3c5779;
	border-top:1px solid #6883a6;
	text-shadow:1px 1px 1px #333333;
}
.rmm.sapphire .rmm-toggled ul li a:active {
	background-color:#3c5779;
	border-bottom:1px solid #3c5779;
	border-top:1px solid #3c5779;
}
.rmm.sapphire .rmm-toggled ul li:first-child a { 
	border-top:1px solid #3c5779 !important;
}





/* MINIMAL STYLE */

.rmm.minimal a {
	color:#333333;
}
.rmm.minimal a:hover {
	opacity:0.7;
}
.rmm.minimal .rmm-main-list li a {
	display:inline-block;
	padding:8px 30px 8px 30px;
	margin:0px -3px 0px -3px;
	font-size:15px;
}
.rmm.minimal .rmm-toggled {
	width:95%;
	min-height:36px;
}
.rmm.minimal .rmm-toggled-controls {
	display:block;
	height:36px;
	color:#333333;
	text-align:left;
	position:relative;
}
.rmm.minimal .rmm-toggled-title {
	position:relative;
	top:9px;
	left:9px;
	font-size:16px;
	color:#33333;
}
.rmm.minimal .rmm-button {
	display:block;
	position:absolute;
	right:9px;
	top:7px;
}

.rmm.minimal .rmm-button span {
	display:block;
	margin:4px 0px 4px 0px;
	height:2px;
	background:#333333;
	width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
	display:block;
	width:100%;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #dedede;
	color:#333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
	border-top:1px solid #dedede;
}
@media (width: 20em){
.logo{
	max-width: 80%;
	margin: 1%;
	margin-left: 5%;
	float: left;
}
.logo img{
	max-width: 100%;
}
.social{
	max-width: 11%;
	float: left;
	margin-left: 2%;
}
.social img{
	max-width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Responsive Mobile Menu</title>
<link rel="stylesheet" href="rmm-css/responsivemobilemenu.css" type="text/css"/>
<link rel="stylesheet" href="rmm-css/estilizacao_reader.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
		<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
		<script type="text/javascript" src="rmm-js/responsivemobilemenu.js"></script>
</head>
<body>

	<header>
		<div class="logo">
			<img src="img/logo.png"/>
		</div>
		<div class="social">
			<img src="img/facebook2.gif"/>
			<img src="img/twitter2.gif"/>
			<img src="img/isntagran2.gif"/>
		</div>
	</header>

        <div class="rmm">
            <ul>
                <li><a href='#home'>Home</a></li>
                <li><a href='#about-me'>About me</a></li>
                <li><a href='#gallery'>Gallery</a></li>
                <li><a href='#blog'>Blog</a></li>
                <li><a href='#links'>Links</a></li>
                <li><a href='#sitemap'>Sitemap</a></li> 
            </ul>
        </div>
</body>
</html>

I am creating a website to improve my skills with html and CSS. I am trying to understand better about the retractable menus and I have a problem that has already occurred with two menus that I downloaded to use example.

I have the menu ready, just changed the information inside the li and started inserting the logo, link to social networks, that sort of thing.

While I do not click on anything on the menu, the layout It stays the way I want it to. The problem is when I click on the menu so that it shows me the options, it loses all the css information I put in the others div.

I believe that there is something in Javascript (that I don’t understand at all) that does this, because I can’t identify anything in html and CSS.

Javascript code:

function responsiveMobileMenu() {
    $('.rmm').each(function () {

        $(this).children('ul').addClass('rmm-main-list'); // mark main menu list

        var $style = $(this).attr('data-menu-style'); // get menu style
        if (typeof $style == 'undefined' || $style == false){
            $(this).addClass('graphite'); // set graphite style if style is not defined
        }
        else {
            $(this).addClass($style);
        }

        /* width of menu list (non-toggled) */
        var $width = 0;
        $(this).find('ul li').each(function () {
            $width += $(this).outerWidth();
        });

        // if modern browser
        if ($.support.leadingWhitespace) {
            $(this).css('max-width', $width * 1.05 + 'px');
        }
        else {
            $(this).css('width', $width * 1.05 + 'px');
        }

    });
}
function getMobileMenu() {

    /*  build toggled dropdown menu list */
    $('.rmm').each(function () {
        var menutitle = $(this).attr("data-menu-title");
        if (menutitle == "") {
            menutitle = "Menu";
        }
        else if (menutitle == undefined) {
            menutitle = "Menu";
        }
        var $menulist = $(this).children('.rmm-main-list').html();
        var $menucontrols = "<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>";
        $(this).prepend("<div class='rmm-toggled rmm-closed'>" + $menucontrols + "<ul>" + $menulist + "</ul></div>");

    });
}

function adaptMenu() {

    /*  toggle menu on resize */
    $('.rmm').each(function () {
        var $width = $(this).css('max-width');
        $width = $width.replace('px', '');
        if ($(this).parent().width() < $width * 1.05) {
            $(this).children('.rmm-main-list').hide(0);
            $(this).children('.rmm-toggled').show(0);
        }
        else {
            $(this).children('.rmm-main-list').show(0);
            $(this).children('.rmm-toggled').hide(0);
        }
    });

}

$(function () {
    responsiveMobileMenu();
    getMobileMenu();
    adaptMenu();

    /* slide down mobile menu on click */
    $('.rmm-toggled, .rmm-toggled .rmm-button').click(function () {
        if ($(this).is(".rmm-closed")) {
            $(this).find('ul').stop().show(300);
            $(this).removeClass("rmm-closed");
        }
        else {
            $(this).find('ul').stop().hide(300);
            $(this).addClass("rmm-closed");
        }

    });
});

/*  hide mobile menu on resize */
$(window).resize(function () {
    adaptMenu();
});

CSS

/*

Responsive Mobile Menu v1.0
Plugin URI: responsivemobilemenu.com

Author: Sergio Vitov
Author URI: http://xmacros.com

License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/

*/

.rmm {
    display:block;
    position:relative;
    width:100%;
    padding:0px;
    margin:0 auto !important;
    text-align: center;
    line-height:19px !important;
}
.rmm * {
    -webkit-tap-highlight-color:transparent !important;
    font-family:Arial;
}
.rmm a {
    color:#ebebeb;
    text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
    margin:0px;
    padding:0px;
}
.rmm ul {
    display:block;
    width:auto !important;
    margin:0 auto !important;
    overflow:hidden;
    list-style:none;
}


/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
    display:none !important;
    height:0px !important;
    width:0px !important;
}
/* */


.rmm .rmm-main-list li {
    display:inline;
    padding:padding:0px;
    margin:0px !important;
}
.rmm-toggled {
    display:none;
    width:100%;
    position:relative;
    overflow:hidden;
    margin:0 auto !important;
}
.rmm-button:hover {
    cursor:pointer;
}
.rmm .rmm-toggled ul {
    display:none;
    margin:0px !important;
    padding:0px !important;
}
.rmm .rmm-toggled ul li {
    display:block;
    margin:0 auto !important;
}




/* GRAPHITE STYLE */

.rmm.graphite .rmm-main-list li a {
    display:inline-block;
    padding:8px 30px 8px 30px;
    margin:0px -3px 0px -3px;
    font-size:15px;
    text-shadow:1px 1px 1px #333333;
    background-color:#444444;
    border-left:1px solid #555555;
    background-image:url('../rmm-img/graphite-menu-bg.png');
    background-repeat:repeat-x;
}
.rmm.graphite .rmm-main-list li a:hover {
    background-image:url('../rmm-img/graphite-menu-bg-hover.png');
}
.rmm.graphite .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rmm.graphite .rmm-main-list li:last-child a {
    -webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.rmm.graphite .rmm-toggled {
    width:95%;
    background-color:#555555;
    min-height:36px;
    border-radius:6px;
}
.rmm.graphite .rmm-toggled-controls {
    display:block;
    height:36px;
    color:white;
    text-align:left;
    position:relative;
    background-image:url('../rmm-img/graphite-menu-bg.png');
    background-repeat:repeat-x;
    border-radius:6px;
}
.rmm.graphite .rmm-toggled-title {
    position:relative;
    top:9px;
    left:15px;
    font-size:16px;
    color:white;
    text-shadow:1px 1px 1px black;
}
.rmm.graphite .rmm-button {
    display:block;
    position:absolute;
    right:15px;
    top:8px;
}

.rmm.graphite .rmm-button span {
    display:block;
    margin-top:4px;
    height:2px;
    background:white;
    width:24px;
}
.rmm.graphite .rmm-toggled ul li a {
    display:block;
    width:100%;
    background-color:#555555;
    text-align:center;
    padding:10px 0px 10px 0px;
    border-bottom:1px solid #333333;
    border-top:1px solid #777777;
    text-shadow:1px 1px 1px #333333;
}
.rmm.graphite .rmm-toggled ul li a:active {
    background-color:#444444;
    border-bottom:1px solid #444444;
    border-top:1px solid #444444;
}



/* SAPPHIRE STYLE */

.rmm.sapphire .rmm-main-list li a {
    display:inline-block;
    padding:8px 30px 8px 30px;
    margin:0px -3px 0px -3px;
    font-size:15px;
    text-shadow:1px 1px 1px #3e587b;
    background-color:#537b9f;
    border-left:1px solid #3e587b;
    background-image:url('../rmm-img/sapphire-menu-bg.png');
    background-repeat:repeat-x;
}
.rmm.sapphire .rmm-main-list li a:hover {
    background:#3e597b;
}
.rmm.sapphire .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.rmm.sapphire .rmm-main-list li:last-child a {
    -webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.rmm.sapphire .rmm-toggled {
    width:95%;
    background-color:#537b9f;
    min-height:36px;
    border-radius:6px;
}
.rmm.sapphire .rmm-toggled-controls {
    display:block;
    height:36px;
    color:white;
    text-align:left;
    position:relative;
    background-image:url('../rmm-img/sapphire-menu-bg.png');
    background-repeat:repeat-x;
    border-radius:5px;
}
.rmm.sapphire .rmm-toggled-title {
    position:relative;
    top:9px;
    left:15px;
    font-size:16px;
    color:white;
    text-shadow:1px 1px 1px #3e587b;
}
.rmm.sapphire .rmm-button {
    display:block;
    position:absolute;
    right:9px;
    top:7px;
    width:20px;
    padding:0px 7px 0px 7px;
    border:1px solid #3e587b;
    border-radius:3px;
    background-image:url('../rmm-img/sapphire-menu-bg.png');
    background-position:top;
}

.rmm.sapphire .rmm-button span {
    display:block;
    margin:4px 0px 4px 0px;
    height:2px;
    background:white;
    width:20px;
}
.rmm.sapphire .rmm-toggled ul li a {
    display:block;
    width:100%;
    background-color:#537698;
    text-align:center;
    padding:10px 0px 10px 0px;
    border-bottom:1px solid #3c5779;
    border-top:1px solid #6883a6;
    text-shadow:1px 1px 1px #333333;
}
.rmm.sapphire .rmm-toggled ul li a:active {
    background-color:#3c5779;
    border-bottom:1px solid #3c5779;
    border-top:1px solid #3c5779;
}
.rmm.sapphire .rmm-toggled ul li:first-child a { 
    border-top:1px solid #3c5779 !important;
}





/* MINIMAL STYLE */

.rmm.minimal a {
    color:#333333;
}
.rmm.minimal a:hover {
    opacity:0.7;
}
.rmm.minimal .rmm-main-list li a {
    display:inline-block;
    padding:8px 30px 8px 30px;
    margin:0px -3px 0px -3px;
    font-size:15px;
}
.rmm.minimal .rmm-toggled {
    width:95%;
    min-height:36px;
}
.rmm.minimal .rmm-toggled-controls {
    display:block;
    height:36px;
    color:#333333;
    text-align:left;
    position:relative;
}
.rmm.minimal .rmm-toggled-title {
    position:relative;
    top:9px;
    left:9px;
    font-size:16px;
    color:#33333;
}
.rmm.minimal .rmm-button {
    display:block;
    position:absolute;
    right:9px;
    top:7px;
}

.rmm.minimal .rmm-button span {
    display:block;
    margin:4px 0px 4px 0px;
    height:2px;
    background:#333333;
    width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
    display:block;
    width:100%;
    text-align:center;
    padding:10px 0px 10px 0px;
    border-bottom:1px solid #dedede;
    color:#333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
    border-top:1px solid #dedede;
}
jquery css
  • 3

    Trust me, no one will download a zip file to search for the problem, not to mention that you will probably later delete that file and the question will not be useful to other users. Play the menu on some site that allows you to see it online, such as Jsfiddle or creating a snippet right here in Stackoverflow.

  • I tried to put the codes there and could not because this menu I have uses images and the snippet does not support, and do not know what is the important part of the code they ask to be displayed because, as I said, I am starting :/ I’ll see if I can put and already send a reply.

  • Look there. I did not put the html

  • Matheus, images, icons, etc don’t matter much, you can rest easy. The important thing is to post an example that shows how the code works to try to understand what you intend to do and help you, it doesn’t need to look beautiful but it needs to work. At least I didn’t understand what you meant by "The problem is when I click on the menu so that it shows me the options, it loses all the css information I put in the other Divs"...

  • Now that I edited the question, I saw that the functions are dependent on the jQuery to work. You’re importing jQuery before that javascript code you posted in the question?

  • I was able to put the snippet. I think it might be easier that way. If you can, put some images there to run the code on your computer. What happens is that if I click on the menu to open it (having resized the browser so that the menu can be visited in a mobile display) it loses the css properties of the images.

  • re22, I found the problem!! at the time I call the media querie I was not declaring as min-width. Adjusting this worked correctly. Thank you so much for your help!

Show 2 more comments
No answers

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.