Solved

Wordpress Template CSS max/min-height issue

Posted on 2013-11-30
7
320 Views
Last Modified: 2013-12-19
Hi, I'm working on celebratebirth.comcelebratebirth.com 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:
element.style {
min-height: 124px;
}

Open in new window


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

Any ideas how I can fix this please?
0
Comment
Question by:khellar
  • 4
  • 2
7 Comments
 
LVL 15

Expert Comment

by:Insoftservice
Comment Utility
You mean to say you want to change min-height:124px please confirm.
please try to remove id='top' and check
0
 
LVL 1

Author Comment

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

Expert Comment

by:Insoftservice
Comment Utility
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
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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.

Cd&
0
 
LVL 1

Author Comment

by:khellar
Comment Utility
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.
0
 
LVL 1

Accepted Solution

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

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

.is-sticky{
height:60px;
}

/*Moves Menu adjust as needed*/
nav.mainMenu{
margin-top:20px;
}

/*Moves Logo adjust as needed*/
.topBar h1{
margin-top:15px;
}

Open in new window

0
 
LVL 1

Author Closing Comment

by:khellar
Comment Utility
This is the correct solution.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses four methods for overlaying images in a container on a web page
This video teaches users how to migrate an existing Wordpress website to a new domain.
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…

763 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now