How to make menu clickable after resize?

Question

I am writing my first website, here, www.shegoesplacesandseesthings.com. When viewed on a small screen, the top navigation menu becomes a little icon instead, an 'svg viewBox', which can be clicked on to open the menu. This works fine with a mouse on a laptop and even on an iPad, the icon is clickable. However on an iPhone screen, the menu resizes to the icon, but is not clickable. I'm writing only in html and css (I've just started learning).

My question is, is it possible to make the icon clickable on an iPhone? I understand that media queries can be used for resizing web pages for different sized screens, or do I need to use Javascript?

Here is the html and css code that sets up the menu bar.

 <nav class="site-nav">
  <span class="menu-icon">
    <svg viewBox="0 0 18 15" width="18px" height="15px">
      <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
    </svg>
  </span>

  <div class="trigger">
    {% for my_page in site.pages %}
      {% if my_page.title %}
      <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
      {% endif %}
    {% endfor %}
  </div>
</nav>


.site-nav {
  float: right;
  line-height: 56px;

  .menu-icon {
    display: none;
  }


@include media-query($on-palm) {
  position: absolute;
  top: 9px;
  right: $spacing-unit / 2;
  background-color: $background-color;
  border: 1px solid $grey-color-light;
  border-radius: 5px;
  text-align: right;

  .menu-icon {
    display: block;
    float: right;
    width: 36px;
    height: 26px;
    line-height: 0;
    padding-top: 10px;
    text-align: center;

    > svg path {
      fill: $grey-color-dark;
    }
  }

  .trigger {
    clear: both;
    display: none;
  }

  &:hover .trigger {
    display: block;
    padding-bottom: 5px;
  }

is this on a real device your using google chrome's mobile emulator? — Roljhon, Jan 11 '17 at 18:07
Please provide all relevant code in an [mcve] in the question itself, not on a third-party site. — Heretic Monkey, Jan 11 '17 at 18:12
Welcome to StackOverflow! Please read the user guidelines on how to ask a good question before posting a question (http://stackoverflow.com/help/how-to-ask) Thank You — Salman Khakwani, Jan 12 '17 at 09:06

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

The :active pseudo class doesn't work in iOS (explained nicely here).

One workaround, if you are reluctant to add some JavaScript support, might be to use the :focus pseudo class in addition to :active on .site-nav

.site-nav:active .trigger,
.site-nav:focus .trigger { display: block; padding-bottom: 5px; }

edited May 23 '17 at 12:16

Community

1
1

answered Jan 11 '17 at 18:20

Ito Pizarro

1,607
1
11
21

I am not against using Javascript, I just don't know what I would need to do – Fliss Jan 11 '17 at 21:07

score 0 · Accepted Answer · answered Jan 12 '17 at 00:00

0

This doesn't answer your question exactly, but you might want to look into the Bootstrap framework. A lot of these issues are already resolved, including the appearance of your website across multiple devices, browsers and screen sizes. If you're learning HTML and CSS you would do well to look through some tutorials on how to use Bootstrap, it will teach you a lot about what is possible with Divs and some clever CSS. Here's the link http://getbootstrap.com/

answered Jan 12 '17 at 00:00

Shady

74
1
8

Thank you, bootstrap has allowed me to do exactly what I wanted to, menu/navbar is now clickable on mobile – Fliss Jan 13 '17 at 22:13
Glad I could help :) – Shady Jan 14 '17 at 23:52

How to make menu clickable after resize?

2 Answers2