WordPress.org

Ready to get started?Download WordPress

Forums

[closed] how to stretch menu across the entire page (15 posts)

  1. envoyer
    Member
    Posted 1 year ago #

    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; }
  2. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    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; }
  3. envoyer
    Member
    Posted 1 year ago #

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

  4. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    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)

  5. envoyer
    Member
    Posted 1 year ago #

    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.

  6. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    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.

  7. envoyer
    Member
    Posted 1 year ago #

    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.

  8. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    [ 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.

  9. envoyer
    Member
    Posted 1 year ago #

    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; }
  10. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Meet resilient silence

  11. envoyer
    Member
    Posted 1 year ago #

    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.

  12. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

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

  13. keesiemeijer
    moderator
    Posted 1 year ago #

    @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.

  14. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    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.

  15. keesiemeijer
    moderator
    Posted 1 year ago #

    @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.

    http://wordpress.org/support/forum/how-to-and-troubleshooting#postform

    [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.]

Topic Closed

This topic has been closed to new replies.

About this Topic