Menu icon Foundation
Help editing media queries pls

I am trying to edit the media queries in a wordpress theme based on zurb foundation. I want to change the screen size where certain CSS changes kick in on my site (teachwithtechnology.net) so that the main menu changes to a combined menu sooner than is currently the case.

I thought I could accomplish this by changing the media query statements, but I can't manage this by trial and error as I had hoped!

Could someone please give me a pointer as to where in the foundation.css file I would need to change the code please?

Any help you could offer would be greatfully received,

ant

media queryediting

I am trying to edit the media queries in a wordpress theme based on zurb foundation. I want to change the screen size where certain CSS changes kick in on my site (teachwithtechnology.net) so that the main menu changes to a combined menu sooner than is currently the case.

I thought I could accomplish this by changing the media query statements, but I can't manage this by trial and error as I had hoped!

Could someone please give me a pointer as to where in the foundation.css file I would need to change the code please?

Any help you could offer would be greatfully received,

ant

Trying To Be Helpful over 5 years ago

1.) Looks like your
HTML
<ul class="title-area">
title-area class is taking up some extra space. Maybe remove that class and see if that helps.

2.) Guessing that you are trying to collapse the menu on medium/tablet size due to the wrap that occurs (which also happened for me).

I ended up editing my "medium" media query to shrink the font-size and padding of my menu items so they all fit on one line.

Example:
CSS
/* medium */
@media only screen and (min-width: 40.063em) {
.top-bar-section ul li > a { font-size: 95%; }
}

Good luck!

ant carter over 5 years ago

Incredibly helpful reply, thank you.

Unfortunately I have tried removing the HTML class above fromt he child theme - with no effect, and also added the media query change to the bottom of the foundation css document - this doesn't change the display of the page. I have tried reducing the font size dramatically to see if I have control over the element and I don't

I know it should work, as you have identified the class I needed to change, I can see this by inspecting element.

Is there something I am missing?

Thank you

ant

Trying To Be Helpful over 5 years ago

Yes, it appears that you are not calling in a custom stylesheet (aside from the WP theme) to override the default Foundation styles. A stylesheet called in BEFORE the Zurb Foundation one, at least.

See this page [ http://foundation.zurb.com/docs/css.html ] for info.

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">

So, adding the custom styles to your [ wp-forge-child/style.css ] stylesheet won't work since it is being called in after the foundation.css -- so maybe play around with adding a new one (but that adds another HTTP Request) or adding the style directly in your Wordpress header file.

I hope reducing the font-size works, as you don't want to go too small -- but maybe someone else can reply in regards to setting the mobile/small menu version for medium screens. I think it may have something to do with the media query breakpoints.

ant carter over 5 years ago

Small delay .. it now works.

Thank you for your advice - in the end I gave in with CSS and added the code to the header.php file.

I found it very difficult to find a CSS document which would affect this change - even altering the foundation CSS zurb document in the parent theme didn't make any difference.

ant