0

I am having an issue with a CSS dropdown menu, which you can see here: studio-scs.de.

Under one point only (portfolio) there is a dropdown menu leading to further points. The problem is I need those to be the same width like the PORTFOLIO button.

If I give that a fixed width like for example "width: 6.3rem;", it would look alright, but only as long as nobody has a different type installed on his computer, because those buttons are variable to its length, which makes them nicer to look at.

Let us say, someone has a different type installed, the width of 6.3 rem might not be the same amount like the space above (PORTFOLIO button).

Luckily the dropdown menu buttons/words are all shorter than portfolio. So, I think there might be a solution to this issue.

Here is the code used:

#nav {display: block; float: left; margin: 0 auto; width: 100%; font-size: 0.75rem;}
#nav ul, div.menu ul {list-style: none; margin: 0; padding: 0;}
#nav li, div.menu li {float: left; position: relative;}
#nav ul ul {display: none; position: absolute; top: 3.4rem; left: 0; float: left; width: auto; z-index: 99999;}
#nav a {color: #333; display: block; padding: 0 1.1rem; text-decoration: none; font-weight: normal; background: rgba(255, 255, 255, .7); margin: 0 0 0 2px;}
#nav ul li:hover > ul {display: block;}
#nav li:hover > a, #nav ul ul :hover > a {color: #888; background: rgba(255, 255, 255, .9);}
     #nav ul ul a {background: rgba(255, 255, 255, .7); text-align: center; line-height: 1rem; width: inherit; padding: 10px 15px; height: auto; margin: 2px 0 0 2px}
#nav ul li.current_page_item > a, #nav ul li.current-menu-ancestor > a, #nav ul li.current-menu-item > a, #nav ul li.current-menu-parent > a {background: rgba(255, 255, 255, .8);}

The line that I put further into the field, is the line with the dropdown menu/options. I tried to solve it with width: inherit;, but that did not help either.

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
vega
  • 127
  • 3
  • 12

2 Answers2

0

You can use JS to compare the widths of the parent element and its the submenu. And than to change the widths to the largest one. 

$(document).ready(function (){

  $('.menu-item-has-children').each(function(){
    var parent = $(this);
    var child = parent.children('.sub-menu');
    if(parent.width() >= child.width()){
      child.width( parent.width() );
    } else {
      parent.width( child.width() );
    }
 });

});

And change the CSS styles:

ul.sub-menu li {
    float: none;
    width: 100%;
    display: block;
}
ul.sub-menu li > a {
    width: auto; /* or just remove this line from your code */
}


Edit:

The javascript is slightly modified and here is a working pen

madcorp
  • 311
  • 2
  • 6
  • About the 404s: Yeah, I am still in the building process, but how did you stumble upon those, anyway? – vega Oct 27 '14 at 10:10
  • Sorry, stupid question: Where do I put the JS code then? – vega Oct 27 '14 at 10:11
  • Find this file in your theme directory - [/wp-content/themes/IS/_/js/functions.js](http://www.studio-scs.de/wp-content/themes/IS/_/js/functions.js), and then put the JS code after this line: `// your functions go here`. About the 404s, I just used the 'Chrome Developer Tools' (hit F12) and then looked if there are any errors. :) – madcorp Oct 27 '14 at 10:21
  • Alright, the 404s are gone and the code is inserted into the js functions file. I also set the width to 100% and auto, but still that does not work. Thank you, by the way. – vega Oct 27 '14 at 18:13
  • @user1720686, You didn't put the css code for this element `ul.sub-menu li`. When you add it - all should work. – madcorp Oct 27 '14 at 18:21
  • So, it should be: #nav ul.sub-menu li {float: none; width: 100%; display: block;} correct? – vega Oct 27 '14 at 18:32
  • Unfortunately, I found a bug in your solution and I can not figure out, where this comes from. If I do a refresh with F5 the drop-down navigation is fine, but if I make a STRG + F5 refresh (cache-emptiing refresh) the width is not correct. That means every new user will see the width not being properly until he does a refresh and then the drop-down width gets "fixed". Do you know why and how to have in the first place? – vega Oct 28 '14 at 20:09
  • Yep there is something strange.. I have made some changes to the JS - check on [codepen](http://codepen.io/madcorp/pen/DHaIl). And if you want to check it in normal browser window (not iframe) - [look here](http://preview.nonk.in/studio-scs/). Btw, inside your theme files find the line of code that echoes the link for the Google fonts and add `data-noprefix` right before the `>`. Check the source on second link. For reference: [Google Fonts giving: error...](http://stackoverflow.com/a/25736115/2883841). – madcorp Oct 28 '14 at 22:52
  • I added the "data-noprefix" for the fonts issue, thank you for that hint. I also changed the JS code as shown on your codepen link, but I think I did something wrong, because it still shows that phenomenon. I had to paste the complete code at the same place, right? Or are there more things to change? – vega Oct 29 '14 at 09:06
  • Madcorp, heeelp. :D :) – vega Oct 30 '14 at 09:19
  • The problem is with the needed time for loading (from scratch) and substituting the default font with the 'Dosis'. The JS code is loaded and executed before the replacement of the font and with the default font ('Times New Roman') the first element of the navigation has width of 130px which is copied to the submenu. One solution is [this](http://stackoverflow.com/questions/4383226/using-jquery-to-know-when-font-face-fonts-are-loaded); another solution is to serve local copy of the 'Dosis' font (you'll need .woff, .eot, .ttf and .svg files) OR change the default font to 'Arial' or similar. – madcorp Oct 30 '14 at 14:04
0

It was easier than thought:

#nav ul.sub-menu {width: 100%;}
#nav ul.sub-menu li {float: none; display: block;}

... solved the problem without any need for JS.

vega
  • 127
  • 3
  • 12