↓
 
Home→Rant→wordpress weaver theme: how to change the sub menu width

wordpress weaver theme: how to change the sub menu width

Computer Aid Posted on by

I’ve recently started using the weaver theme for WordPress.

One of the biggest mental hurdle to jump over, is to not directly alter the CSS stylesheet, but to use the CSS sections under the main options menu of the Weaver Admin panel, and in some cases, the <head> section of Advanced Options

However, I did find that using google to find the correct snippet of CSS code really didn’t work well, since most people go straight to altering the CSS stylesheet.

But I soon found out how to “uncover” the correct CSS on my own.

A good example was the menu bar along the top of:

Home Loan Advisors

I added the CSS:

{font-size:180%}

to the CSS sections for “Menu Bar text”, “Menu Bar hover” and “Menu Bar current page”

This made the menu font just the right size I wanted.

However…

The drop down menu was a fixed width, so the sub menu words were wrapping around, causing an ugly mis-alignment of the gradient background.

The solution:

I found someone who mentioned changing the #access and #access2 section in the stylesheet, but I decided to carefully look at the stylesheet myself (Appearance -> Editor)

The stylesheet is reasonable well documented, so I went to the menu section of the stylesheet, looking for something about “width” and a size of about 100 to 300 px (pixels)… which is what I guessed was the width of existing sub menu.

it didn’t take long to find a section that looked like this:

#access ul ul,
#access2 ul ul,
#access3 ul ul {
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 38px;
    left: 0;
    padding-left:0px;
    float: left;
    width: 180px;
    z-index: 99999;
}

So, what I wrote in the Advanced Options -> <head> was:

#access ul ul {width:240px;}
#access2 ul ul {width:240px;}
#access3 ul ul {width:240px;}

I was close: that altered the menu width, and the background shadow, but the gradient background hadn’t increased in width.

Another look at the stylesheet showed this code:

#access ul ul a,
#access2 ul ul a,
#access3 ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}

So I also added the following code to the <head> section:

#access ul ul a {width:220px;}
#access2 ul ul a {width:220px;}
#access3 ul ul a {width:220px;}

Bingo!

Just the right width!

However, some alterations are more difficult than others.

Ultimately, more comprehensive documentation (or even more meaningful variable names), would make this process a lot easier.

I mean, why call sub menu widths: “access”, why not just call it “sub-menu-width”?

Comments

wordpress weaver theme: how to change the sub menu width — 6 Comments

  1. Entrecard is down, so i just leave a comment to let you know that i came here….but your post here is very useful.

  2. I found the section you mention:

    #access ul ul,
    #access2 ul ul,
    #access3 ul ul {
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 38px;
    left: 0;
    padding-left:0px;
    float: left;
    width: 180px;
    z-index: 99999;

    Do I just add the script to it IE change it to;

    #access ul ul,
    #access2 ul ul,
    #access3 ul ul {
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 38px;
    left: 0;
    padding-left:0px;
    float: left;
    width: 180px;
    z-index: 99999;
    #access ul ul a {width:220px;}
    #access2 ul ul a {width:220px;}
    #access3 ul ul a {width:220px;}

    Or do I place it elsewhere?

    Thanks

  3. you should never change weaver scripts directly (otherwise weaver updates will overwrite any changes you make).

    To change weaver parameters, you need to go into your wordpress admin panel, then into the weaver admin panel, then to: Advanced Options ->

    Thats where you should add the changed parameters.
    eg: just add 3 lines that say:
    #access ul ul a {width:220px;}
    #access2 ul ul a {width:220px;}
    #access3 ul ul a {width:220px;}

  4. I just wanted to drop a quick note and thank you for posting this. I also found the comment about “#access and #access2 section” but couldn’t figure out where to go.

    In my case I went to Appearance>Editor
    and my code looked like this:
    text */
    font-weight:normal;
    height:auto;
    line-height:18px;
    padding:10px 10px;
    width:100px;

    So I played with some other numbers and the drop-downs look better. I changed the width to:
    width:300px;

    I appreciate you writing this, it helped. Many

    Thanks.
    Sigal Zoldan

  6. Aw, this was an extremely nice post. Finding the time and actual effort to
    generate a superb article… but what can I say… I procrastinate
    a lot and never manage to get anything done.

↑