Wordpress Template CSS max/min-height issue

Posted on 2013-11-30
Last Modified: 2013-12-19
Hi, I'm working on and the header is behaving erratically. When I use the inspector in chrome to view the code it shows this line for the top nav bar:

<section class="topBar normal-menu" id="top" style="min-height: 124px;">

Open in new window

yet when I look at it with view > Source i get this:
<section class="topBar normal-menu" id="top">

Open in new window

without the min-height. I'm trying to kill that min-height so that the bar will be shorter but I can't track it down. Went in to wordpress's custom css field and entered
.topBar .normal-menu #top {min-height: 74px !important; height: 104px !important;}

Open in new window

I'm still getting the same thing when I inspect the element with Chrome: {
min-height: 124px;

Open in new window regard to that same line of code mentioned first above.

Any ideas how I can fix this please?
Question by:khellar
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
LVL 15

Expert Comment

ID: 39686549
You mean to say you want to change min-height:124px please confirm.
please try to remove id='top' and check

Author Comment

ID: 39686784
I want to change min-height to something lower like 74. I've removed id="top" and it appears that nothing is different.
LVL 15

Expert Comment

ID: 39686806
Its coming via js if its nt present in your page.
Its hard to catch from where its getting added .
But even if you remove it . It would not be affect the height as minimum is 117px.
if you don't mind you could provide code details and if its not voiding EE rules
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 53

Expert Comment

ID: 39687003
The header minheight is being overridden from the scripting and to fix it you are going to have to go through the excessive scripting to find where the style is being written.  As the style is almost certainly being put inline you cannot override with conventional CSS in a stylesheet.

You might try setting it with the important hack with min-height:74px !important; and if you are lucky then it will override and you will not have to dig through the scripting.  C

Just a caution that themes are frequently a house of cards and a minor change that the author did not anticipate may collapse the whole effect.


Author Comment

ID: 39688870
I'm not sure how I would find the excessive scripting related to this so I'm going to contact the developer and post his suggestion here once I have it. Thanks to you both.

Accepted Solution

khellar earned 0 total points
ID: 39718624
This is the solution that was needed for the 907 wordpress template. Thank you all for your help!

/*Set Height*/
.topBar {
min-height: 60px;


/*Moves Menu adjust as needed*/

/*Moves Logo adjust as needed*/
.topBar h1{

Open in new window


Author Closing Comment

ID: 39728754
This is the correct solution.

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Access blocked to XML files other than sitemap.xml? 4 33
CSS in HTML 5 52
Pull Variable from URL  Use php template 1 32
How do I show a login page over the login page? 5 40
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question