Corey Smith

It looks the height is being set on “.nav-wrap” by javascript when you click the menu icon. It toggles from 0px to hide the menu to 35px for one line, or 70px for two lines, depending on how narrow the browser is when you click the icon. When you click the icon at a very narrow size it sets the height attribute to 70px, then when you expand the screen the height stays at 70px until you click the button again. The same thing happens in reverse, with items falling into two lines while “.nav-wrap” stays set at a 30px height.

Putting “height: auto” on “.nav-wrap” seems to let it expand or collapse with the menu items.

You might try this in your stylesheet:

.nav-wrap .expand {
  height: auto !important;
}

I’m not sure if that will help, or if it will just get overridden.

This may not make a difference but have you tried changing “in_category” to “is_category”?

I think it may be a specificity problem. It looks like your styles are showing up and then being overridden by the parent theme styles. You could try adding an ID selector to be more specific than the parent theme.

#primary .entry-title {
  font-family: "over the rainbow", cursive;
  font-size: 32px;
  font-weight: normal;
}

If you don’t mind some images being squished, you can set the height in css:

.wp-post-image {
  width: 100%;
  height: 800px;
}

You might want to use some media queries to switch it up at smaller sizes. 800px could be quite a scrolling experience on a phone or small tablet.

@media (max-width: 600px) {
  .wp-post-image {
    height: 500px;
  }
}

Or if you would like everything to always be full width but remain proportional:

.wp-post-image {
  width: 100%;
  height: auto;
}

Am I going in the right direction with this?

What size were you wanting the image to be? You can make them be the same width by setting a width in css. Using css, however, they can still differ in their height. You can force them to be a certain height but they will look expanded or squished.

This will set a max-width and center your image:

.wp-post-image {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
  height: auto;
}

If you need them to be exact dimensions, you can use the built in cropping tool in the media screen (would also let you decide exactly what part of the image you want to use), or use the add_images_size function similar to what you’re already doing.

add_image_size( 'banner', 1280, 300, true );

This will do a hard crop of the image at 1280×300.

I think it has to do with menu “stepdown”, but since you’re only floating the last two list items it only steps down on the last two items.

this article explains what’s happening: Prevent Menu Stepdown

Putting display: inline on the list items, and float: left on the anchor tags seems to allow it to shrink and expand while maintaining an even height in Chrome.

#nav-header .nav>li {
  display: inline;
}

.nav li a {
  float: left;
}

You might want to use media queries to fine tune the size at smaller screen widths. Since it’s a background image you’ll have to use background size and position.

.header-wrap {
  background-size: 100%;
  background-position: 0em -1em;
}

It looks like it will automatically update the year. If you want to change the text to something else you’ll have to edit the footer template file.

<div class="credits section bg-dark no-padding">
  <div class="credits-inner section-inner">

    <p class="credits-left">
      Your Text Here
    </p>

    <p class="credits-right">
      Your Text Here
    </p>

    <div class="clear"></div>
  </div> <!-- /credits-inner -->
</div> <!-- /credits -->

Don’t forget to make a child theme if you’re editing template files.

Are you using a child theme? If you’re going to be changing a lot you may want to consider it. It might likely help with the CSS issues as well.

Currently it has “font-size: 24px” and “font-color: #ffffff” applied to it, but since that’s not valid it’s falling back to “color: #000”. Seems like the custom css is finding it’s way to the right spot.

If it’s a specificity problem you might try “#main h1” to target all h1 tags, or “.home #main h1” to target just your front page.

What is it you’re trying to do to the H1 tag? I noticed it has “font-color: #ffffff” applied to it. font-color isn’t a valid css property. It should just be “color: #ffffff”.

Would you be able to show the code from the section you’re working with? I’m thinking you might not need to use styles. You could possibly just check to see if the post has the term, and if it does, don’t display the box markup, if it doesn’t, display the box markup.

<?php
if ( has_term( 'non-spektrix', 'event' ) ) {
     // do nothing
} else {
     // ticket box markup
}
?>

I believe it would need to go in the loop in your template file. I could be incorrect in thinking that however.

So somewhere after:

<?php while ( have_posts() ) : the_post(); ?>

You could do something like:

if( has_term( 'non-spektrix', 'taxonomy-name' ) ) {
    // do something
}

Replace taxonomy name with the name of the taxonomy that non-spektrix belongs to. Or if get_field in your second example is a true/false ACF field, that might work in the loop also.

If your child theme is currently your active theme you can edit the stylesheet in appearance>editor

You can do this with your parent theme also, but any changes you make will be overridden when the parent theme gets updated.

If a child theme hasn’t already been created, this page explains how to do it. All it is is a folder with a stylesheet in it next to your parent theme. But you’ll need a way to get it on the server.

WordPress Codex Child Themes

The most basic child theme is one folder and one stylesheet I believe. So next to the folder that contains the files to your current theme, you can create a new folder with a different name ( something like “parent-theme-child” or “mcphotography” perhaps ) and inside that folder create a new style.css with the following lines on top:

/*
 Theme Name:  Your Theme Name
 Template: twentyfourteen
*/

@import url("../twentyfourteen/style.css");

replace twentyfourteen with the name of the parent theme.

the @import brings the parent themes styles into your child theme, then below that you can add your own code.

If all goes well you should be able to select your child theme in appearances>themes