Need help? Check out our Support site, then


CSS custom navigation bar

  1. I am using template Twenty Eleven and want to add a custom navigation bar. I am willing to change my template if someone suggests that would make things easier to achieve this look. The design elements and preview look are here: http://imgur.com/a/gOaAS
    I wanted to do rollover images on my navigation bar as well (yellow splotch is the rollover).
    I am also having a hard time figuring out how to adjust the spacing between the main content and the sidebar.

    The blog I need help with is capturesinbeauty.wordpress.com.

  2. Hi there, it appears you have switched to the Twenty Eleven theme and I see you have a yellow-ish color when the menu items are hovered. I took a quick peek in your media library and do not see a yellow splotch image anywhere. If you still want to do this, upload that image to your media library and I'd be happy to help with that.

    Now that you are on Twenty Eleven, do you still want to adjust the spacing between the sidebar and content?

  3. Thank you so much! I will get the images uploaded for the navigation bar now. I want an image for my navigation bar as well with the roll over being the yellow splotch. Is that something you can help me do? As far as the spacing, I am fine with it now that I changed my template, but I can't figure out how to adjust the spacing between my buttons on the sidebar. I am using the image widget, but maybe I should just add them a different way. I wanted the spacing and social media icons to look like this, but I am struggling to achieve it.
    http://imgur.com/a/gOaAS

  4. Ok, the images for the navigation bar and rollover have been uploaded!

  5. The standard menu in Twenty Eleven does not have the necessary CSS selectors for me to be able to do this. The first thing you need to do would be to create a Custom Menu for your Primary location. I do see that we may run into an issue as your images are pretty wide and we have limited space available for them in the main navigation location. You may end up having to make them narrower in order for us to add them and not have them be on two lines.

  6. I can definitely resize to whatever you think would fit and work. Do you know how I could determine the correct size so that it would display on one line?

  7. I set up a custom menu called Main Menu.

  8. Super, we now have the needed CSS classes in the menu items to do this. Yes, I think you are going to have to edit your images and make them narrower. I've Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

    I've done this in a Media Query and limited this to 900px and wider screens, allowing the menu design to go back to the original below that point as things really go awry below that when trying to use the images. If you rework your images and make them much narrower, we can keep your new design down to a narrower width. We can address that after you rework the images.

    @media screen and (min-width: 900px) {
    .only-search.with-image {
      display: none;
    }
    #branding .only-search + #access div {
      padding-right: 0;
    }
    #access {
      background: none;
      box-shadow: none;
    }
    #access div {
      margin-left: 30px;
      margin-right: 30px;
      text-align: center;
    }
    #access ul {
      display: inline-block;
    }
    #access a {
      min-height: 50px;
    }
    #page {
      max-width: 1120px;
    }
    /*Home*/
    #menu-item-845 a {
      background: transparent url("https://capturesinbeauty.files.wordpress.com/2016/09/navbar1.jpg") no-repeat scroll left top;
      width: 232px;
      text-indent: -9999px;
    }
    #menu-item-845 a:hover, #menu-item-845.current_page_item a, #menu-item-845.current-menu-item a {
      background: transparent url("https://capturesinbeauty.files.wordpress.com/2016/09/navbar1roll.jpg") no-repeat scroll left top !important;
    }
    
    /*About*/
    #menu-item-847 a {
      background: transparent url("https://capturesinbeauty.files.wordpress.com/2016/09/navbar2.jpg") no-repeat scroll left top;
      width: 150px;
      text-indent: -9999px;
    }
    #menu-item-847 a:hover, #menu-item-847.current_page_item a, #menu-item-847.current-menu-item a {
      background: transparent url("https://capturesinbeauty.files.wordpress.com/2016/09/navbar2roll.jpg") no-repeat scroll left top !important;
    }
    
    /*FAQ*/
    #menu-item-848 a {
      background: transparent url("https://capturesinbeauty.files.wordpress.com/2016/09/navbar3.jpg") no-repeat scroll left top;
      width: 120px;
      text-indent: -9999px;
    }
    #menu-item-848 a:hover, #menu-item-848.current_page_item a, #menu-item-848.current-menu-item a {
      background: transparent url("https://capturesinbeauty.files.wordpress.com/2016/09/navbar3roll.jpg") no-repeat scroll left top !important;
    }
    
    /*Contact*/
    #menu-item-849 a {
      background: transparent url("https://capturesinbeauty.files.wordpress.com/2016/09/navbar4.jpg") no-repeat scroll left top;
      width: 260px;
      text-indent: -9999px;
    }
    #menu-item-849 a:hover, #menu-item-849.current_page_item a, #menu-item-849.current-menu-item a {
      background: transparent url("https://capturesinbeauty.files.wordpress.com/2016/09/navbar4roll.jpg") no-repeat scroll left top !important;
    }
    }

    Let me know what you think.

  9. Ok, I will work on the images now. Thank you so so much! It looks like the wonder wifey button didn't work with the code.

  10. Ok, I uploaded narrower images for the navigation bar. Let me know if these work better.

  11. Hmmm, I didn't see an images for Wonder Wifey, which is why I didn't include it in the code above.

    All you need to do is go into your media library and copy out the URLs for the new images and replace the URLs between the quote marks in the background declarations. I did notice that your non-hover image for Contact is 42px tall where all the others are 50px, so edit and re-upload that image.

    Once you get that done, I can help with the widths and such to get it to look seamless from side-to-side.

    This is the basic code for Wonder Wifey which you would add before the ending curly bracket in the media query and then simply add in the URLs for the images.

  12. Resized that image, removed wonder wifey (My bad, it wasn't even supposed to be in the nav bar) and updated links. Thank you again so much!

  13. Great, and you are welcome. Let us know if you have additional questions or problems.

  14. Would you be able to assist in fixing the width of the blog and the navigation buttons to run together instead of being separate as they are now?

  15. There is a very large white gap between my main content column and the sidebar. If we could get that closer together, that would be awesome!

  16. Please start a new thread for additional questions. Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic