Fotomatic Project Header

I am trying to adjust the tablet mode version of this site so that the header changes according to the design spec. The problem is I cannot get the green ‘Join Us’ Button to appear, it shows in the mobile sizes but not on tablet size.
From my understanding, I want to keep some list items from the .desktop class and hide one. Then display the button list item from the .mobile class and hide the rest.

CSS:

/* Header */

header {
position: fixed;
width: 100%;
max-height: 85px;
border-bottom: solid 1px #c6c1c1;
background-color: white;
z-index: 1;
top:0;
}

header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}

header .logo {
flex: 1;

}

header nav ul {
display: flex;
align-items: center;
}

nav li {
padding-left: 3.5rem;
float: right;
display: block;
padding-bottom: 20px;
}

nav a {
vertical-align: middle;
line-height: 1.6;
font-size: 1rem;
color: #4a4a4a;
text-decoration: none;
}

header .icon {
width: 1rem;
padding-left: .75rem;
}

header .mobile {
display: none;
}
@media only screen and (min-width: 640px) and (max-width: 760px) {
header .mobile .button {
padding: .1875rem .5rem;
background-color: #9dc20b;
line-height: 1.6;
color: white;
float: right;
display: block;
flex: 1;
z-index: 2;
}

header .insta {
display: none;
}

header .content {
padding: .5rem 0;
}

nav li {
display: relative;

}

header .logo {
flex: 0;
}
}
@media only screen and (max-width: 640px) {

header .desktop {
display: none;
}

header .mobile {
display: block;
width: 100%;
}

header .content {
padding: .5rem 0;
}

header .mobile ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}

header .mobile li {
padding: 0;
}

header .mobile .button {
padding: .1875rem .5rem;
background-color: #9dc20b;
line-height: 1.6;
color: white;
}
}

a.desktop.logo {
font-family: “Roboto”;
text-decoration: none;
color: #4a4a4a;
font-size: 1.5rem;
padding-bottom: 20px;

[quote=“willplattt, post:1, topic:656970, full:true”]
I am trying to adjust the tablet mode version of this site so that the header changes according to the design spec. The problem is I cannot get the green ‘Join Us’ Button to appear, it shows in the mobile sizes but not on tablet size.
From my understanding, I want to keep some list items from the .desktop class and hide one. Then display the button list item from the .mobile class and hide the rest.

CSS:

/* Header */

header {
position: fixed;
width: 100%;
max-height: 85px;
border-bottom: solid 1px #c6c1c1;
background-color: white;
z-index: 1;
top:0;
}

header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}

header .logo {
flex: 1;

}

header nav ul {
display: flex;
align-items: center;
}

nav li {
padding-left: 3.5rem;
float: right;
display: block;
padding-bottom: 20px;
}

nav a {
vertical-align: middle;
line-height: 1.6;
font-size: 1rem;
color: #4a4a4a;
text-decoration: none;
}

header .icon {
width: 1rem;
padding-left: .75rem;
}

header .mobile {
display: none;
}
@media only screen and (min-width: 640px) and (max-width: 760px) {
header .mobile .button {
padding: .1875rem .5rem;
background-color: #9dc20b;
line-height: 1.6;
color: white;
float: right;
display: block;
flex: 1;
z-index: 2;
}

header .insta {
display: none;
}

header .content {
padding: .5rem 0;
}

nav li {
display: relative;

}

header .logo {
flex: 0;
}
}
@media only screen and (max-width: 640px) {

header .desktop {
display: none;
}

header .mobile {
display: block;
width: 100%;
}

header .content {
padding: .5rem 0;
}

header .mobile ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}

header .mobile li {
padding: 0;
}

header .mobile .button {
padding: .1875rem .5rem;
background-color: #9dc20b;
line-height: 1.6;
color: white;
}
}

a.desktop.logo {
font-family: “Roboto”;
text-decoration: none;
color: #4a4a4a;
font-size: 1.5rem;
padding-bottom: 20px;

<!-- Header -->
  <header>
    <div class="content">
      <a href="index.html" class="desktop logo">Fotomatic</a>
      <nav class="desktop">
        <ul>
          <li><a href="#">Product detail</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="https://www.instagram.com/" class="insta">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
        </ul>
      </nav>
      <nav class="mobile">
        <ul>
          <li><a href="#" class="tohide"><img src="./resources/images/ic-logo.svg"></a></li>
          <li><a href="#" class="tohide"><img src="./resources/images/ic-product-detail.svg"></a></li>
          <li><a href="#" class="tohide"><img src="./resources/images/ic-about-us.svg"></a></li>
          <li><a href="#" class="button">Join us</a></li>
        </ul>
      </nav>
    </div>
  </header>

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.