A few fixes that exceed my skills

Hi All,

I’m an HTML guy and Sitepointer from way back, but have been out of circulation for a couple of years. Jumping back in and trying to get up to speed with the latest, so I used a responsive HTML template but have a few things beyond my skill.

My dev site is here: http://ehydrant.com/inelect

  1. I want to change the spacing between the underline and the text on the top nav, but cannot find it in the CSS.
  2. I can’t get the white space above “Markets We Serve” right. I’m guessing there’s a nesting or missing but don’t see it.
  3. Clicking “Markets We Serve” in the nav blows right past the headline in the body when it should stop above it.

Can someone point me in the right direction on this stuff?

Thank you!


If you are talking about the blue border on hover then that is created with this rule here:

/* style css line 935 */
menu ul li:hover a, .menu ul li a.active {
  color: #005dab;
  border-bottom: 2px solid #005dab;

The spacing is created by padding bottom on the ‘a’ element and if you want the border level with the line that goes across the screen then try setting it to about 14px.


/* style css line 940 */
.menu ul li a {
  padding: 34px 20px 14px;

On the other elements the sections have 120px top padding so why not do the same for markets.



Should now be fixed with the padding I just suggested on .markets.

You do have some errors in your code so take a trip to the validator. :smile:


<!-- Quotes -->
	<section id="quote" class="quote bg-img fixed bg-two">
		<div class="overlay"><section id="about" class="about"></div>
		<div class="row">

Is that section supposed to open and close straight away?

<section id="about" class="about"></div>

Stray ‘a’ tag here:

<p>All Rights Reserved.</p></a>

Just saw this - thank you! I’ll look at it in detail and report back soon :wink:

PaulOB - thanks very very much for the detailed help! When I was a member of the forum here years back it was always a source of helpful people and you have kept the tradition alive.

Half the fixes are working for me, but half aren’t:

Nothing I do there changes anything. Even deleting the line has no effect. It must be overridden somewhere, but I can’t find it. Any ideas?

That’s a parallax section. As the page is scrolled, it reveals the background image. Something wrong there?

Are we talking about a specific validator?

Also, on an iPhone 6 in landscape, the page pulses up and down continuously about 10px. Ever seen anything like that?


Paul is most likely talking about the HTML validator.

1 Like

I’m not sure what the current problems are with the menu, but I would like to ask you to try something, please.

style.css (line 1089)

.menu {
    background: #eeeeee none repeat scroll 0 0;
    display: none;
    height: auto;
    margin-top: 50px;  /* why? */
    opacity: 0;
    padding-bottom: 10px;
    padding-left: 20px;
    position: absolute;  /* why? */
    right: 0;
    text-align: left;
    width: 100%;

At this time, in Firefox, the items below the menu ride under the menu at narrow widths. If you disable the items that I marked “why?” in the above CSS, the underflow stops. Don’t know if anything is adversely affected or not, so you need to try it out. Hopefully this will help with something and not break something else.

Thanks for the help ronpat.

I commented out the lines you pointed out and no change. I also commented out line # 942 “padding: 50px 20px 49px;” and the underline on the menu is unchanged. Since I can’t affect the menu underline, I’m trying to find what is overriding it, but don’t see anything, even going through the menu section around line #1104. :weary:


So changing the gap between the menu underline and the menu text is the one fix I need and the iPhone 6 in landscape having the page pulse up and down continuously about 10px is the other.

I’m stuck, so all help is welcomed.


Yes, the layout of the menu at narrow widths looks better now.

Are you trying to change the position of the blue line beneath the top menu items when they are hovered?

Change this bottom padding from 24px to something less.

style.css (line 1006)

.menu ul li a {
    padding: 34px 20px 24px;

Yup! That was it! Thanks ronpat. Somehow I missed what PaulOB was saying or have just been befuddled by the whole thing (dusting off rusty skills).

The last nagging weird issue is the page jitter on iPhone 6. Any ideas where to approach this?

I don’t have an iThing so can’t help with that. I feel sure that someone else will be along shortly who can, though. :slight_smile:

Looks like you still need to take the validator for a run.

Yes that’s what I said in my first post lol :smile:

Yes that is caused by the webkit ‘bugfix’ you have in base.css.

body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

There are no comments in the code as to what bug that was supposed to be fixing and as your page is quite large it will be impossible to tell. That’s why you must document any bugfixes in the code otherwise no one wil know why they are there.

Suffice to say that bugfix is killing the iphone in landscape because you also have an animation on all ‘a’ elements and combined with the infinite bugfix on the body element you go into an infinite loop.

The only bug I know that the ‘bugfix’ attempts to fix is the adjacent sibling bug in -webkit but that is long since fixed.

I would remove the section of code from the body entirely unless you know explicitly why it was added. The code also sends the cpu into overdrive as it is working all the time. If indeed the code is needed for some other animation then the only other fix is to remove the animation you placed on all ‘a’ elements here:

/* Smooth hover effects */

a i,
input[type="submit"] {
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;

Again that is another bad move as it is a global rule and affects all anchors including those that don’t need transitions and therefore you make the browsers works ten times as hard as it should. Use classes and apply transitions only when needed. Remember a browser only has so much power so don’t use it all up before you start :smile:


Thanks again Paul.

I’ve been trying to understand and sort this out, but again, my skills are a few years old and webkit and responsive stuff is entirely new to me. This was all part of the template I’ve been working off of, so debugging new stuff is hard for me.

I see the code in the CSS. What code in the body? Can you be more explicit?


I meant that css which is being applied to the body element. :smile:

Just remove this css which is being applied to the body element.

body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.