CSS custom navigation bar

  • Author
    Posts
  • #2747002

    lindsaymbehr
    Member

    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.

    #2747140

    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?

    #2747165

    lindsaymbehr
    Member

    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

    #2747167

    lindsaymbehr
    Member

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

    #2747168

    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.

    #2747169

    lindsaymbehr
    Member

    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?

    #2747170

    lindsaymbehr
    Member

    I set up a custom menu called Main Menu.

    #2747171

    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.

    #2747172

    lindsaymbehr
    Member

    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.

    #2747173

    lindsaymbehr
    Member

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

    #2747174

    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.

    #2747177

    lindsaymbehr
    Member

    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!

    #2747181

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

    #2747182

    lindsaymbehr
    Member

    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?

    #2747183

    lindsaymbehr
    Member

    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!

    #2747184

    kathrynwp
    Staff

    Please start a new thread for additional questions. Thanks.

The topic ‘CSS custom navigation bar’ is closed to new replies.