Wordpress menu css styling issue

Question

I have developed basic html&css styled menu that i am now trying to change to wordpress menu. Problem here is from height fluctuation. Min-height has been set to 50px and in codepen it only expands to 55px height, it will in wordpress version expand to 65px height. Any styling help for this? 55px height still looks good but 65 is too much

#main-nav{
background: #2c2c2c;
margin: 0 auto;
min-height: 50px;
border-bottom: 5px solid #cd2122;
z-index: 12;
}
#main-nav ul li {
text-transform: uppercase;
font-family: arial,Georgia, serif;
font-size:12px;
position: relative;
display: inline-block;
float: left;
border:1px solid #222222;
border-width:0 0 0 1px;
height:50px;
}
#main-nav ul li a {
display: inline-block;
height: 50px;
line-height: 50px;
color: #ddd;
padding:0 14px;
text-shadow:0 1px 1px #000;
border-left:1px solid #383838;
position: relative;}

http://codepen.io/reshogun/pen/rOVmrz

Instead of using min-height you can go for height

Arun Kumar M
– Arun Kumar M

2015-09-08 04:41:09 +00:00
Commented Sep 8, 2015 at 4:41 — Arun Kumar M
– Arun Kumar M, Commented Sep 8, 2015 at 4:41

Derek Story · Accepted Answer · 2015-09-08 04:47:52Z

1

You can either add a max-height of 55px or remove the min-height and give it a fixed height of 55px:

Using Max height: Codepen

#main-nav{
background: #2c2c2c;
margin: 0 auto;
min-height: 50px;
max-height: 55px;
border-bottom: 5px solid #cd2122;
z-index: 12;
}

Using height: Codepen

#main-nav{
background: #2c2c2c;
margin: 0 auto;
height: 55px;
border-bottom: 5px solid #cd2122;
z-index: 12;
}

answered Sep 8, 2015 at 4:47

Derek Story

9,5831 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Reshogu Over a year ago

It is shame that you need 10 rep to post img here. This max-height and height-setting breaks other css settings and forces. Menu-item is no longer centered vertically and because of that separator is over the nav background. Does anyone have idea what to do?

Reshogu Over a year ago

i.imgur.com/zuVhlzO.png Here is link to how this menu is now after max-height / height setting

Reshogu Over a year ago

Here is wordpress/php code for that menu part: <nav id="main-nav"> <div class="container"> <?php $main_menu = array( 'theme_location' => 'primary', 'container_class' => 'nav-menu-container', 'menu_class' => 'nav-menu', ); wp_nav_menu($main_menu); ?> </div> </nav>

sourabh · Accepted Answer · 2015-09-08 07:26:57Z

0

I checked out your given link what you did in menu styling, and this not just because of you are using WordPress it is error of some miss use of css code. so below are the css changes you have to made and checkout it is working fine as you expected

body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #666666;
  font-size: 14px;
  line-height: 20px;
  padding: 0 !important;
  height: 2999px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #454545;
  font-weight: 300;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  margin: 0 0 15px;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
.clear {
  clear: both;
}
.bold {
  font-weight: bold;
}
a {
  color: #1c1c1c;
  text-decoration: none;
}
a:hover {
  color: #7ab80e;
  text-decoration: none;
}
ul,
ol {
  padding: 0;
  margin: 0 0 10px 25px;
}


#main-nav{
    background: #2c2c2c;
    margin: 0 auto;
    border-bottom: 5px solid #cd2122;
    z-index: 12;
    position:relative;
}
#main-nav ul li {
  text-transform: uppercase;
  font-family: arial,Georgia, serif;
  font-size:12px;
  position: relative;
  display: inline-block;
  border:1px solid #222222;
  border-width:0 0 0 1px;
  float:left;
}
#main-nav ul li a {
  display: inline-block;

  color: #ddd;
  padding:12px;
  text-shadow:0 1px 1px #000;
  border-left:1px solid #383838;
  position: relative;
}

Thanks Sourabh

edited Sep 8, 2015 at 7:26

answered Sep 8, 2015 at 7:01

sourabh

1521 silver badge9 bronze badges

7 Comments

Reshogu Over a year ago

It is little better but still needs some fix. Separators should be from bottom to top. while it is not yet as you see it from picture. i.imgur.com/ETqyV8A.png

sourabh Over a year ago

can i know why you are using the position:relative with every element

Reshogu Over a year ago

It seems "extra" ones are from my previous try to find solution on another problem. I will clean my css and post another version here

sourabh Over a year ago

Please remove your css code and paste the following code that i have given then let me know.

Reshogu Over a year ago

That 19 min ago posted img shows the problem it seems still have. Separator should vertically touch top

|

Collectives™ on Stack Overflow

Wordpress menu css styling issue

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related