WordPress.org

Support

Support » How-To and Troubleshooting » how to stretch menu across the entire page

how to stretch menu across the entire page

  • I am using the Piano Black theme by Mono Lab and I would like for my navigation menu to stretch the entire length of my blog, no left/right margins, its just centering the menu and when I go to add a button instead of squeezing it to the top it adds a second menu on the bottom, I DO NOT want this and I would love to know how to make it stay center but to continue stretching across the entire length of the site. I am not great with coding as I am quite new to all this, here is the menu coding, can anybody see any easy for for this by chance? Also … Any way to speed up the menu speed? Sometimes it stalls a bit, seems quite slow when I go to use the menu, it does seem to show the drop down menus quicker in chrome for me than firefox so not sure if its just based on the browser I’m using or what but it seems very slow at times in firefox especially.

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    /*  ------ header-menu ------------------------ */
    
    .header-menu-wrapper { }
    
    #pngfix-right {  no-repeat right top; display:block; width:10px; height:60px; float:right; }
    #pngfix-left {  no-repeat left top; display:none; width:10px; height:60px; float:right; }
    
    .menu {  background:url(img/menu_middle.png) repeat-x left top; font-size:11px; height:61px; margin:0; }
    .menu, .menu ul { line-height:1; margin:0; padding:0; }
    .menu li { position:relative; float:left; border-left:1px solid #222; height:55px; padding:0 14px; z-index:100; }
    .menu li.first_menu { border:none; }
    .menu ul li { height:auto; border-left:none; padding:0; left:auto;  }
    .menu #header-menu-home { border:none; }
    .menu a, .menu a:visited { color:#888; display:block; padding:0 15px; line-height:49px; position:relative; top:5px; }
    .menu a:hover { color:#83bac4; border-bottom:2px solid #83bac4; text-decoration:none; }
    
    .menu ul { position:absolute; top:52px; left:0; display:none; opacity:0; width:200px; }
    .menu ul a, .menu ul a:visited { background:#000; line-height:140%; padding:9px 30px 8px; border:1px solid #222; width: 128px; margin:-1px 0 0 0; }
    .menu ul a:hover { background:#222; border-bottom:1px solid #222; }
    .menu ul ul { margin: -34px 0 0 189px; top:34px; }
    
    .menu .current_page_item a, .menu .current_page_item a:visited,
     .menu .current-cat a, .menu .current-cat a:visited,
      .menu .current-menu-item a, .menu .current-menu-item a:visited
    { color:#869497; border-bottom:2px solid #627376; }
    
    .menu .current_page_item a:hover,
     .menu .current-cat a:hover,
      .menu .current-menu-item a:hover
    { color:#83bac4; border-bottom:2px solid #83bac4; text-decoration:none; }
    
    .menu .current_page_item ul a, .menu .current_page_item ul a:visited, .menu .current_page_item ul a:hover,
     .menu .current-cat ul a, .menu .current-cat ul a:visited, .menu .current-cat ul a:hover,
      .menu .current-menu-item ul a, .menu .current-menu-item ul a:visited, .menu .current-menu-item ul a:hover
    { border-bottom:1px solid #373737; }
    
    .menu ul .parent_menu > a:link, .menu ul .parent_menu > a:visited { background:#000 url(img/arrow1.gif) no-repeat 170px 15px; }
    .menu ul .parent_menu > a:hover { background:#222 url(img/arrow1.gif) no-repeat 170px 15px; }
Viewing 14 replies - 1 through 14 (of 14 total)
  • Providing a site link will help forums members assist, without it’s a guessing game. Also, you do not need to include the CSS (as above), we will use web inspection tools to see the stylesheet(s).

    That said this line looks like it would make each UL 200px wide

    .menu ul { position:absolute; top:52px; left:0; display:none; opacity:0; width:200px; }

    oh sorry about that, it’s http://www.candlelitlife.com

    Change in style.css:

    .menu A {
    padding-right: 15px;
    padding-left: 15px;
    }

    to a smaller # of pixels (try 6) will gain you more room.

    The menu will have limitations on the amount of items (the # of characters and padding, margin etc. going across)

    You may want to consider a new menu item that contains 2 or 3 of the existing ones at the UL (rebuild your menu)

    Thanks but for the life of me I can’t find anywhere in my style sheet where there is :

    .menu A {

    where exactly would I want to change the padding in my specific theme? And for some reason, my last menu button is larger than the rest and it won’t center my title for that menu button. It’s driving me nuts! How do I fix this?

    Thanks in advance.

    Sorry, you will need to understand these issues or hire an expert. It is quite clear to all who know how to read CSS what this issue is and we will respond best to those who realize that. It’s not magic…. most importantly it’s not us hiding a truth.

    I don’t understand what you would reply in that manner for. I was merely asking where in the style sheet you were seeing :

    .menu A {

    … As I was not seeing that in the menu section of my style sheet, as I pasted above in my first post, that’s where I was looking. I just want to be sure I am changing the right section so I don’t mess anything up, which is understandable isn’t it?

    I was nothing but polite in my reply back so I am a bit taken aback by the fashion you chose to reply to me in.

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    Please understand that we can and do provide assistance, but can decline when we feel that it would be less beneficial overall to the WP community to spend time on an understood topic.

    This is the menu coding on my style sheet, I assume that’s what you meant by post code?

    .header-menu-wrapper { }
    
    #pngfix-right {  no-repeat right top; display:block; width:10px; height:60px; float:right; }
    #pngfix-left {  no-repeat left top; display:none; width:10px; height:60px; float:right; }
    
    .menu {  background:url(img/menu_middle.png) repeat-x left top; font-size:11px; height:61px; margin:0; }
    .menu, .menu ul { line-height:1; margin:0; padding:0; }
    .menu li { position:relative; float:left; border-left:1px solid #222; height:55px; padding:0 14px; z-index:100; }
    .menu li.first_menu { border:none; }
    .menu ul li { height:auto; border-left:none; padding:0; left:auto;  }
    .menu #header-menu-home { border:none; }
    .menu a, .menu a:visited { color:#888; display:block; padding:0 15px; line-height:49px; position:relative; top:5px; }
    .menu a:hover { color:#83bac4; border-bottom:2px solid #83bac4; text-decoration:none; }
    
    .menu ul { position:absolute; top:52px; left:0; display:none; opacity:0; width:200px; }
    .menu ul a, .menu ul a:visited { background:#000; line-height:140%; padding:9px 30px 8px; border:1px solid #222; width: 128px; margin:-1px 0 0 0; }
    .menu ul a:hover { background:#222; border-bottom:1px solid #222; }
    .menu ul ul { margin: -34px 0 0 189px; top:34px; }
    
    .menu .current_page_item a, .menu .current_page_item a:visited,
     .menu .current-cat a, .menu .current-cat a:visited,
      .menu .current-menu-item a, .menu .current-menu-item a:visited
    { color:#869497; border-bottom:2px solid #627376; }
    
    .menu .current_page_item a:hover,
     .menu .current-cat a:hover,
      .menu .current-menu-item a:hover
    { color:#83bac4; border-bottom:2px solid #83bac4; text-decoration:none; }
    
    .menu .current_page_item ul a, .menu .current_page_item ul a:visited, .menu .current_page_item ul a:hover,
     .menu .current-cat ul a, .menu .current-cat ul a:visited, .menu .current-cat ul a:hover,
      .menu .current-menu-item ul a, .menu .current-menu-item ul a:visited, .menu .current-menu-item ul a:hover
    { border-bottom:1px solid #373737; }
    
    .menu ul .parent_menu > a:link, .menu ul .parent_menu > a:visited { background:#000 url(img/arrow1.gif) no-repeat 170px 15px; }
    .menu ul .parent_menu > a:hover { background:#222 url(img/arrow1.gif) no-repeat 170px 15px; }

    Meet resilient silence

    that was incredibly rude … you give this board a bad name. I understand that you don’t have to answer everyone’s questions, and if your just going to reply in a rude manner, its best you don’t reply at all. You mention if its in the best interest of the WP community you wont respond to certain questions but yet you find the time to reply with nothing but rude and unhelpful remarks .. ironic.

    Please review my help history here and review your lack of understanding of forums rules.

    Moderator keesiemeijer

    @keesiemeijer

    @seacoast Web Design
    We appreciate all the help you give here on these forums but please be a little more tolerant of different levels of knowledge and experience. Not everyone is at the same level. Just step back and let others help if you don’t have anything constructive to add in solving this topic.

    if you don’t have anything constructive to add in solving this topic

    I did add something very constructive (as I have with same in the past), I reviewed the history of the poster here on the forums along with a Google search of the site, along with some DNS research…came to a clear conclusion based on all this that the ‘envoyer’ was not being genuine.

    Moderator keesiemeijer

    @keesiemeijer

    @seacoast Web Design

    I did add something very constructive (as I have with same in the past)

    Yes you have, and it’s appreciated.

    Nevertheless, the reply “Meet resilient silence” isn’t very constructive in solving this topic. That in combination with some of your other replies in this topic could even be construed as disrespectful.

    Looking at the history of the original poster here on the forums I don’t see the poster not being genuine. It seems to me he/she has legitimate forum questions.

    @envoyer
    I’m sorry but please create another topic for your problem as this one is closed.

    How-To and Troubleshooting

    [Topic Closed: as per the Forum welcome, we reserve the right to close any posts that are deemed to be non-productive support/WordPress discussions.]

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘how to stretch menu across the entire page’ is closed to new replies.
Skip to toolbar