WordPress.org

Ready to get started?Download WordPress

Forums

Dropdown menu too long in Twentyeleven (10 posts)

  1. williamkeck
    Member
    Posted 1 year ago #

    Hey folks,

    I am doing a website and covering many neighborhoods in Paris (there are 20). I would really like them to be split into 5-7 vertically and a few columns for the dropdown menu. however, in Twenty eleven, this is not so straight forward. Now, the dropdown only goes vertically and off the page - when you try to scroll, you lose the menu.

    Any advice on this? How to have a menu that goes not just vertically but horizontally (without using submenus).

    The site is http://www.parispoc.com and the example is if you hover over "Live".

    thanks and look forwards to your expertise :)))

    Cheers,

    william

  2. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    If you're not familiar with HTML and CSS, you could consider a plugin that handles something similar.

    Your main navigation menu links need to be taller to join with the sub menu. As you can see with the Live link, there's a 5 pixel gap where you are no-longer interacting with the hyperlink, which disappears the submenu. Consider either expanding the height of anchor tags or moving the submenu upwards.

  3. williamkeck
    Member
    Posted 1 year ago #

    Hey Andrew,

    Well, I decided to take the JQuery route, but I seem to have made a big error. In their instructions, you have to install your own widget in the header (as there is not one by default). I have added this code to the functions.php and then went to proceed to the header.php file but then the site crashed. Now, since there is a parsing error in the code, I cannot even login to wordpress to remove the code.

    This is becoming quite frustrating... any ways to reverse what I have done without logging in?

    Thanks and best regards,

    William

  4. williamkeck
    Member
    Posted 1 year ago #

    Ignore my last post, I fixed the file by reloading the original functions.php via FTP. However, I still have the problem that JQuery only works for sidepars unless you define a widget area...

  5. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Okay William, don't worry about the plugin.
    Here's some CSS you could try;

    /* Expand the width of the submenu to allow space for 2 columns */
    #access ul ul {
     width: 400px;
     /* Here's a fix for the disappearing submenu too */
     top: 30px;
    }
    
    #access li li a {
     display: block;
     /*You need to add a height, otherwise some times with larger
      * heights will push down others. It will basically look messy with
      * large gaps.
     */
     height: 20px;
    }

    Are you using a Child Theme or a Custom CSS/Styles plugin to implement your CSS modifications?

  6. williamkeck
    Member
    Posted 1 year ago #

    I copied the theme from twentyeleven and renamed it. I looked into child themes but it did not make much sense to me.

    Looking at what you are doing here, there is no #access li li a - rather there is:

    #access ul ul {
    	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	display: none;
    	float: left;
    	margin: 0;
    	position: absolute;
    	top: 3.333em;
    	left: 0;
    	width: 400px;
    	z-index: 99999
        top: 30px;;
    }
    #access ul ul ul {
    	left: 100%;
    	top: 0;
    }
    #access ul ul a {
    	background: #BAB5B5;
    	border-bottom: 1px dotted #ddd;
    	color: #444;
    	font-size: 10px;
    	font-weight: strong;
    	height: auto;
    	line-height: 1em;
    	padding: 10px 10px;
    	width: 168px;
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
    	background: #BAB5B5;
    }
    #access li:hover > a,
    #access a:focus {
    	background: #f9f9f9; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    	color: #373737;
    }
    #access ul li:hover > ul {
    	display: block;

    I set to 400px and added 30px for top...But not sure for the next part. Will this end up giving me two different columns (and how?)

    Thanks a lot for the continued support. Cheers!

  7. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    WordPress' philosophy on themes not custom built is to avoid modifying those themes' files, as your modifications are likely to erase once the theme updates.

    You should be using either a Child Theme, or an easier and CSS-specific CSS Manager plugin.

    Code should then be created to override your theme's files, within the Child Theme or Custom CSS Manager plugin.
    You need then only copy & paste my code into either of these.

    But not sure for the next part. Will this end up giving me two different columns (and how?)

    I'm not sure which part you're referring to.
    Your sub menu items are already floated left, but they haven't enough room to sit next to eachother because the submenu has a small width.
    Expanding the width for the submenu to 400 pixels is just wide-enough for the submenu items to sit aside one another, in a 2-column layout.

  8. williamkeck
    Member
    Posted 1 year ago #

    Andrew,

    I really appreciate your help but unfortunately this is not working as described. I have added the code you talked about and am witnessing no changes.

    Are there other options?

    Cheers,

    William

  9. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Odd, there's more styling necessary now;

    • Change the #access ul ul width to 500px.
    • Add overflow to the #access ul ul.
    • Add a width to the <li> elements.

    So your code should be this, all together;

    #access ul ul {
     width: 500px;
     overflow: hidden;
     top: 30px;
    }
    
    #access ul ul li {
     width: 250px;
    }
    
    #access li li a {
     display: block;
     /*You need to add a height, otherwise some times with larger
      * heights will push down others. It will basically look messy with
      * large gaps.
     */
     height: 20px;
    }
  10. williamkeck
    Member
    Posted 1 year ago #

    Hey Andrew.

    It just does not end up working out the right way. I am going to tinker more with the JQuery stuff. I still have some problems with making my own widget area, but I need to try to figure that out...

    Thanks,

    William

Topic Closed

This topic has been closed to new replies.

About this Topic