1

I have one more question about my website www.springtribe.de .

I have programmed the small responsive dropdown menu for the mobile site - the problem is that the menu doesn't direct me to the third-party websites even though I have put those third-party links into my HTML.

For example - You can see the Instagram selected on the right top corner, but my website is stuck with the landing page when it's supposed to be moved onto an Instagram page.

Here are my HTML and CSS for the problem dropdown menu. Any insights on what might have gone wrong appreciated!

HTML + CSS

/* Header */
header {
  position: fixed;
  z-index: 100;
  width: 100%;
  border-bottom: solid 1px #c6c1c1;
  background-color: white;
}

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


header .site-logo {
  flex: 1;
  width: 60%
}

header nav ul {
  display: flex;
}

ul {
  list-style-type: none;
  display: flex;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

nav li {
  padding-left: 3.5rem;
}

nav li:last-child {
  display: flex;
}

nav a {
  vertical-align: bottom;
  line-height: 1.6;
  font-size: 1rem;
  color: #de6cb6;
}

nav select {
  display: none;
}

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

a:-webkit-any-link {
  cursor: pointer;
}

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

header .mobile {
  display: none;
}

@media only screen and (max-width: 1200px) {
  
  nav li:last-child {
    display: block;
  }

  header .content {
    padding: 1rem 1rem;
  }
}

@media only screen and (max-width: 1000px) {
  header {
    float: none;
  }
  
  header nav ul {
    display: none;
  }

  header nav select {
    display: inline-block;
    width: 100%;
  }
  

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


}
 <!-- Header -->
  <header>
    <div class="content" style="height: 60px;">
      <a href="landingde.html"  class="site-logo"><img src="./resources/images/cropped_springtribelogo_notagline.png" style="height:60px;"></a>
      <nav>
        <ul>
          <li><a href="impressum.html">Impressum</a></li>
          <li><a href="index.html">EN</a></li>
          <li><a href="https://www.instagram.com/springtribe.de/?hl=en"><img class="icon" src="./resources/images/instagram (1.png"></a></li>
          <li><a href="https://www.linkedin.com/in/florian-zejewski-03653b164/?originalSubdomain=de"><img class="Linkedin" src="./resources/images/Linkedin_saturated_4.png" style="width: 20px; color: #de6cb6; margin-left: 8px;"></a></li>
        </ul>
        <select>
          <option value="/impressum.html/">Impressum</option>
          <option value="/index.html/">EN</option>
          <option value="https://www.instagram.com/springtribe.de/?hl=en">Instagram</option>
          <option value="https://www.linkedin.com/in/florian-zejewski-03653b164/?originalSubdomain=de">Linkedin</option>
        </select>
        </nav>
    </div>
  </header>
morry239
  • 43
  • 5

1 Answers1

1

As mentioned in the comments, you need some JavaScript, See JSFiddle for this working in action.

<select onChange="window.open(this.value)">
<option value ="">select</option> 
<option value="/impressum.html/">Impressum</option>
<option value="/index.html/">EN</option>
<option value="https://www.instagram.com/springtribe.de/?hl=en">Instagram</option>
<option value="https://www.linkedin.com/in/florian-zejewski-03653b164/?originalSubdomain=de">Linkedin</option>
</select>

The onchange event fires when a different option is selected. window.open(url) opens a new tab with the passed url.

koder613
  • 1,486
  • 5
  • 21
  • Thank you so much for the codes! Now my dropdown is working perfectly :) – morry239 Jan 08 '21 at 20:21
  • One more question - would it be possible for me to change the size of the drop down menu? It does display on the mobile but it looks too tiny. I have tried tips listed here https://stackoverflow.com/questions/13931571/how-can-change-width-of-dropdown-list But it didn't work out for me. – morry239 Jan 17 '21 at 18:54
  • You can use `@media only screen and (max-width: 600px) {select {width: 200px;}}`. Define the `width` to whatever you desire. If my answer solved your original issue, please mark it as accepted so the system won't categorise it wrongly. – koder613 Jan 17 '21 at 20:08
  • @morry239 Did the code in my prev. comment work? – koder613 Jan 18 '21 at 08:52
  • Thanks for the source code again. I applied it to my VScode and the width of the drop down menu got longer, but the options (imprint, Instagram etc) still displays the tiny text. – morry239 Jan 18 '21 at 10:26
  • @morry239 `@media only screen and (max-width: 600px) {select {width: 200px;}option{font-size: 2rem;}}`. This will make the font of the options larger as well. – koder613 Jan 18 '21 at 10:40
  • Unfortunately not, the text on the dropdown menu "select..." is still tiny after i applied that code. I was able to change the width of the dropdown square but the text in it stayed unchanged. – morry239 Jan 22 '21 at 15:12