navigation box way long on mobile devices

Add max-height to this class you can adjust 300px to what you want.

@media only screen and (max-width: 768px)
style.css?ver=3.0.2:2514
.home-top .wrap {
    margin-left: 5%;
    margin-right: 5%;
    padding: 40px;
    max-height: 300px;
}

Select allOpen in new window

THank you but, rather than NEW adding code which would be difficult to adjust since phones are all sizes, I was guessing that I did something in the code that I added to the site to cause this since the template from Studio Press is fine.  Care to take a peek?

https://my.studiopress.com/themes/education/#demo-phone

Here is code that I added.  Could something here cause this problem?

/*.............. HOME PAGE TEXT............*/
.entry {
    padding: 0px 30px 20px 40px;
}


/*.............. YELLOW BOX in SLIDER ...........*/


.education-pro-blue .sidebar .widget {
border-color:1px solid #c7151b;}

.education-pro-blue .home-top .widget_text {
  color:#000;
line-height:1.5em;
padding-top:20px;
font-size:1.5em;}


.education-pro-blue .home-top .wrap, .education-pro-blue .site-header {
    border-color: #c7151b;
}

.education-pro-blue .home-top .wrap {
  
  background-color: #fff200;}


/*.............. CONTAINER............
body.custom-background {
    border-top: 20px solid #000;
}*/


.education-pro-blue .home-top .wrap, {
    border-color: #fff200;
    padding-top: 20px;
    background-color: #fff204;
}



.education-pro-blue.home-top .widget_text {
    color: #000000;
    font-size: 15px;
    line-height: 1.1;
    text-align: center;
}


.education-pro-blue .home-middle
 {
    padding: 20px 10px 20px;
  background-color: #000;
}

/*.............. LEFT SIDEBAR............*/
.sidebar-secondary {
    width: 220px;
}

/*.............. RIGHT SIDEBAR............*/

.widget {
    margin-bottom: 0px;
}

.education-pro-blue .sidebar .widget-title {
    color: #c7151b;
  border:none;
}







/*.............. LOGO.............*/
.education-pro-blue .site-header {
    height: 150px;
}

.header-image .title-area {
	background-color: transparent;!important;
	padding: 0;
}

.header-image .site-title > a {
  float: left;
  min-height: 150px;  /*keeps the logo ABOVE slider*/
  width: 100%;
  background-color:transparent;
}


/*.............. yellow box on home page .............*/
.education-pro-blue .after-entry .widget, .education-pro-blue .home-top .wrap,  .education-pro-blue .site-header {
  padding-top:50px;

}

.title-area {
    box-shadow: none;
}




/*.............. SITE CONTENT.............*/
.site-inner {
    clear: both;
    padding-top: 60px;
    background-color: #fff;
  margin-top:20px;
  margin-bottom:20px;
}


/*.............. H TAGS.............*/
h2 {
    font-size: 20px;
    color: #c7151b;
}



/*.............. NAVIGATION.............*/
.education-pro-blue .button, .education-pro-blue .genesis-nav-menu .sub-menu .current-menu-item > a:hover, .education-pro-blue .genesis-nav-menu .sub-menu a, .education-pro-blue .genesis-nav-menu li a:hover, .education-pro-blue .genesis-nav-menu li.current-menu-item > a, .education-pro-blue .home-bottom, .education-pro-blue .widget-area .widget.enews-widget, .education-pro-blue button, .education-pro-blue {
    background-color: #c7151b;
}

/*.............. FOOTER.............*/

.education-pro-blue .site-footer {
    background-color: #ed1c24;
  padding: 15px 0px;
}

Select allOpen in new window

I have tried to to disabled your custom code from the console and only I was to be able to fix only by what I have proposed in previous message. max-height won't cause issue on mobile device as it only limit the height

You have to check everywhere these class are called in your custom css.

.home-top .wrap

Select allOpen in new window

Have you edited the main CSS?
If so, compare both file to check the diff.

Also compare both code page maybe you have not used the template correctly by adding extra div or missing a class or not using the correct container.

Why would .home-top .wrap be involved when it is the navigation that is the problem?

I removed the yellow background color and there is still a mile long problem.

greetings nsitedesigns, , I'll say some things but I could not locate in the very many CSS file, what may or may not cause a problem.

To me the problem exists with the screen width is less than about 1000 or 980 pixels, due to a change somewhere in CSS with a media screen like -
       @media screen and (max-width: 1000px) { }
or some equivalent.
My element inspector says the the text content container -
       <section id="text-10" class="widget widget_text">
has beed changed in CSS to a width of ZERO pixels, I think this causes all of the text words to be stacked on top of each other in a single word per line, and this causes the -
     <div class="wrap">
to be 6980 pixels high, , AND because the  section id="text-10"  is 0 pixels wide, no text can be seen.


Would you know where the CSS width break points with the  "media screen" are in which CSS library file?

It is not relate to the color it's related to the height of the menu container.
So by limiting the height you will fix the problem in a minute.

@media only screen and (max-width: 768px)
style.css?ver=3.0.2:2514
.home-top .wrap {
    margin-left: 5%;
    margin-right: 5%;
    padding: 40px;
    max-height: 300px;
}

Select allOpen in new window

I put your css into my file and it did nothing so I removed  it.  I put it back in now so you can see that it didn't fix problem.
Why do you have

style.css?ver=3.0.2:2514

Select allOpen in new window

in the css? I tried it with and without the funky code and there was no change.

This class is already present in your template you just need to add a line to it

the rev code is visible from the console
http://9bf.27e.myftpupload.com/wp-content/themes/education-pro/style.css?ver=3.0.2

original code line 1447

@media only screen and (max-width: 768px)
style.css?ver=3.0.2:2514
.home-top .wrap {
    margin-left: 5%;
    margin-right: 5%;
    padding: 40px;
}

Select allOpen in new window

change it to

@media only screen and (max-width: 768px)
style.css?ver=3.0.2:2514
.home-top .wrap {
    margin-left: 5%;
    margin-right: 5%;
    padding: 40px;
    max-height: 300px;
}

Select allOpen in new window

I added  this and it does not work.  See screen shot.
https://screencast.com/t/iqigwgxEe3Qu

Also, did you mean to include

style.css?ver=3.0.2:2514

Select allOpen in new window

?   I tried it with and without and neither worked.

I added only this -

#text-10 {
    width: 100%;
}

not in any media screen, just in the normal css, and as far as I have tried it, it seems to work?

you may need to add something in the
      @media only screen and (max-width: 768px) {
for reducing the padding-top  for
      .widget-area
maybe

 @media only screen and (max-width: 768px) {
body {
  font-size: 16px;
  }
/* Other css here */

.widget-area: padding-top: 18px;

}

Select allOpen in new window

I added the below code.  It helped but now text that appeared in yellow box now sits ontop of black non-hazardous liquid text.  I am not sure what the #text-10 is for.

@media only screen and (max-width: 768px) {
.widget-area { padding-top: 18px;  
}

#text-10 {
    width: 100%;
}

Select allOpen in new window

Looks good here
https://screencast.com/t/zI5rwQYtLm

But here, after I click hamburger icon, that yellow text gets pushed down OVER the drip icon
https://screencast.com/t/71ul97zeM

Other solutions did not work.