CODEWITHSUNDEEP
jqueryhtmlcssresponsive-designtoggleclass
Stephan-v
Stephan-v

Reputation: 20309

Jquery inline css with display: block overrides my main css

I'm currently working on a responsive menu, but the problem I'm running into that when I open the menu in mobile/tablet mode(less than 1100px wide), and I resize back to fullscreen my responsive menu will still show.

This is because the jquery toggle function add the display:block as inline css. I need it to be removed when somebody resizes back to fullscreen but I can't find a quick fix for this.

Could somebody be willing to help me out here? I would really appreciate it!

Here is my code, if you downsize it below 1100px width you can click the responsive menu button. If you go fullscreen again you can see both menu's are visible now.

Responsive menu codepen

<script>
    $(document).ready(function() {
        $('.nav-button').click(function() {
            $('.responsive-menu').slideToggle();
            $(this).toggleClass('is-visible');
        });
    });
</script>


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*  #Allround menu style
================================================== */
.menu ul {
  list-style: none;
  width: 100%;
}

/*  #Default menu style
================================================== */
.default-menu {
  float: right;
}
.default-menu ul {
  float: right;
  padding: 20px 0;
}
.default-menu ul li {
  margin-left: 20px;
  float: left;
}
.default-menu ul li a {
  text-decoration: none;
  color: #000;
  padding: 10px 0;
  display: block;
}

/*  #Responsive menu style
================================================== */
.responsive-menu {
  display: none;
  text-align: center;
}
.responsive-menu ul li a {
  display: block;
  text-decoration: none;
  color: #000;
  background: whitesmoke;
  padding: 3em;
}
.responsive-menu ul li:last-child {
  border: none;
}

/*  #Navigational button
================================================== */
.nav-button {
  display: none;
  position: relative;
  width: 45px;
  height: 45px;
  float: right;
  margin: 10px 20px 0 0;
}
.nav-button span, .nav-button span:before, .nav-button span:after {
  width: 28px;
  height: 3px;
  position: absolute;
  background: black;
  left: 0;
}
.nav-button span {
  -moz-transition: background 0.2s 0.5s;
  -o-transition: background 0.2s 0.5s;
  -webkit-transition: background 0.2s;
  -webkit-transition-delay: 0.5s;
  transition: background 0.2s 0.5s;
  top: 21px;
  left: 8px;
}
.nav-button span:before {
  -moz-transition: -moz-transform 0.2s 0.5s;
  -o-transition: -o-transform 0.2s 0.5s;
  -webkit-transition: -webkit-transform 0.2s;
  -webkit-transition-delay: 0.5s;
  transition: transform 0.2s 0.5s;
  top: 8px;
  content: '';
}
.nav-button span:after {
  -moz-transition: -moz-transform 0.2s 0.5s;
  -o-transition: -o-transform 0.2s 0.5s;
  -webkit-transition: -webkit-transform 0.2s;
  -webkit-transition-delay: 0.5s;
  transition: transform 0.2s 0.5s;
  bottom: 8px;
  content: '';
}

.nav-button.is-visible span {
  visibility: hidden;
  background-color: rgba(255, 255, 255, 0);
}
.nav-button.is-visible span:before {
  -moz-transform: translateY(-8px) rotate(45deg);
  -ms-transform: translateY(-8px) rotate(45deg);
  -webkit-transform: translateY(-8px) rotate(45deg);
  transform: translateY(-8px) rotate(45deg);
  visibility: visible;
}
.nav-button.is-visible span:after {
  -moz-transform: translateY(8px) rotate(-45deg);
  -ms-transform: translateY(8px) rotate(-45deg);
  -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
  visibility: visible;
}

.container {
  width: 1100px;
  margin: 0 auto;
}

.column-1 {
  width: 5.58333%;
}

.column-2 {
  width: 14.16667%;
}

.column-3 {
  width: 22.75%;
}

.column-4 {
  width: 31.33333%;
}

.column-5 {
  width: 39.91667%;
}

.column-6 {
  width: 48.5%;
}

.column-7 {
  width: 57.08333%;
}

.column-8 {
  width: 65.66667%;
}

.column-9 {
  width: 74.25%;
}

.column-10 {
  width: 82.83333%;
}

.column-11 {
  width: 91.41667%;
}

.column-12 {
  width: 100%;
}

.row {
  width: 100%;
  *zoom: 1;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

[class*="column"] {
  float: left;
  margin-left: 3%;
}
[class*="column"]:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 1100px) {
  .container {
    width: 90%;
  }

  [class*="column"] {
    margin: 0;
    width: 100%;
  }

  .responsive-menu .column-2 {
    width: 16.66667%;
    text-align: center;
    margin: auto;
  }

  .nav-button {
    display: block;
  }

  .default-menu {
    display: none;
  }
}
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/main.css">
	<title>Responsive Menu</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script>
		$(document).ready(function() {
			$('.nav-button').click(function() {
				$('.responsive-menu').slideToggle();
				$(this).toggleClass('is-visible');
			});
		});
	</script>
</head>
<body>
	<div class="row">
		<nav class="menu responsive-menu">
			<ul>
				<li><a href="#" class="column-2">Link 1</a></li>
				<li><a href="#" class="column-2">Link 2</a></li>
				<li><a href="#" class="column-2">Link 3</a></li>
				<li><a href="#" class="column-2">Link 4</a></li>
				<li><a href="#" class="column-2">Link 5</a></li>
				<li><a href="#" class="column-2">Link 6</a></li>
			</ul>
		</nav>

		<a href="#" class="nav-button">
			<span></span>
		</a>

		<div class="container">
			<nav class="menu default-menu">
				<ul>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
					<li><a href="#">Link 4</a></li>
					<li><a href="#">Link 5</a></li>
				</ul>
			</nav>
		</div><!-- end .container -->
	</div><!-- end .row -->
</body>
</html>

Upvotes: 0

Views: 147

Answers (1)

isherwood
isherwood

Reputation: 61083

It's not typical to have two menu lists for this type of thing. You should be able to do it with one. In that case, you'd be showing the menu for tablet/desktop sizes anyway, and your problem is moot.

This gets you close. 

@media only screen and (min-width: 1100px) {
  .responsive-menu {
    display: block !important;
  }
  .nav-button {display: none;}
}

Note that I've removed the second menu list. You'll need to adjust styling for desktop.

Demo

Here it is with styling closer to your original. 

@media only screen and (min-width: 800px) {
  .responsive-menu {
    display: block !important;
    text-align: right;
    padding: 20px 50px;
  }
  .responsive-menu > ul {
    display: inline-block;
    width: auto;
  }
  .responsive-menu > ul > li {
    display: inline-block;
    width: auto;
  }
  .responsive-menu > ul > li a {
    padding: 5px 10px;
    width: auto;
    background: transparent;
  }
  .nav-button {display: none;}
}

Demo 2

Upvotes: 2

Related Questions