Need help? Check out our Support site, then


Spun theme: customizing navigation color/background shape, mobile navigation

  1. Hello,

    I would like to do the following:

    1) Change the rectangular background of the main navigation (Home, About, etc.) items to be grey with rounded corners, like the "More (older posts)" button at the bottom on both desktop and mobile/tablet views.

    2) When the main navigation collapses to "MENU" on mobile, it defaults to a black font. I'd like to change this to match the color of my other navigation text, along with adding the rounded corners (or even circular) background as mentioned above, and possibly change it to the three-bar/hamburger menu icon, rather than use text:

    3) I'd like to make the text of the "More (older posts)" button change to the secondary yellow color when it's hovered over, as the main navigation and other links already do.

    Thank you!

    -Rob
    http://blog.robcorpuz.com

    The blog I need help with is blog.robcorpuz.com.

  2. Here's how I would do it, I haven't checked extensively as changing the menu for desktops can have consequences for the tablet and mobile views but it is definitely a start. The first two parts take care of Q1, the next two for Q2 and the last for Q3. If it breaks anything dramatically let me know!

    #menu-menu>li {
      background-color: #444;
      border-radius: 50px;
      margin-left: 10px;
      padding: 3px 5px;
    }
    
    #menu-menu li ul {
      margin-top:6px;
    }
    
    h1.menu-toggle {
      background-color: #444;
      border-radius: 50px;
      padding: 10px;
      color: #888eb2;
      font-weight:normal;
    }
    
    @media ( max-width: 800px ) {
        #menu-menu li {
        background-color:transparent;
      }
    }
    
    #infinite-handle span:hover:after {
      color:#E3AF01;
    }

    You might want to include the browser specific -moz- and -webkit- border radius properties too so that it works in as many browsers as possible.

  3. Thanks so much for your help Hallluke! Looks much better now) A couple of questions though:

    1) Now the desktop "Home" button appears to be broken. When I click on it nothing happens.

    2) After seeing the way it looks, I'd like to be able to change the background color of all the buttons to #888eb2, like my logo, and change the text inside the buttons to white, but also keep #888eb2 as my main non-hover color for links elsewhere on the site (and keep what's currently yellow as yellow). I tried it and it worked fine, except for the main navigation, where the text stays at my overall link setting of 888eb2 as a non-hover link. Can I set some kind of exception to the overall link hover color settings so that just the text links in the main navigation are white?

    3) As I'm still new to this, I have no idea how to set the specific border radius properties for other browsers. Any suggestions there?

    Thanks so much for your help! -Rob

  4. My mistake: the home button works fine. I think it's just because I was in editing mode)

  5. Try swapping out what I suggest before with this instead:

    #menu-menu>li {
      background-color: #888eb2;
      border-radius: 50px;
      margin-left: 10px;
      padding: 3px 5px;
    }
    
    #menu-menu>li>a {color:#fff!important;}
    
    #menu-menu li ul {
      margin-top:6px;
    }
    
    h1.menu-toggle {
      background-color: #888eb2;
      border-radius: 50px;
      padding: 10px;
      color: #ffffff;
      font-weight:normal;
    }
    
    @media ( max-width: 800px ) {
        #menu-menu li {
        background-color:transparent;
      }
      #menu-menu>li>a {
        color:#888eb2!important;
      }
      #menu-menu a:hover {color:#E3AF01!important;}
    }
    
    #infinite-handle span:hover:after {
      color:#E3AF01;
    }

    Again, you'll need to test it to make sure changing one section hasn't broken another. The bit about the browser prefixes means that where you see
    border-radius: 50px;
    you want to also include the following too

    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
  6. Thanks so much! You're a legend) That works great, except I'd still like for the main navigation white text to change to yellow on hover (right now it stays white on hover).

    Also, you can ignore this next question if you're busy, but I'm probably going to keep the bottom widget area always visible and the "+" button/toggle hidden, but if I wanted to apply the same look to it as the other buttons (888ebc background, white icon but turns yellow on hover), how would I do that?

    Thanks again!

  7. Oops, you should be able to fix the hover colour for the top level menu items with this line of code:

    #menu-menu>li>a:hover, h1.menu-toggle:hover {color:#E3AF01!important;}

    As for the second part I can see a "+" button to show the comment area as shown on your about this blog page, but I'm not sure that's the element you're talking about, could you be a bit more specific?

  8. Ah, I'd forgotten about the comment bubbles but yeah, those too. I was originally talking about the toggle that shows the widget area at the bottom of the page. I currently have it hidden, but I'll now go and show it again so it's visible. I'd love to have both fit with the main page bubbles, to be consistent, as well as change the comment "+" signs to read "Comment" or "Leave a comment" or something like that. Thanks. I'll try the addition now...

  9. Now I see it, try this to change both the widget area and the comment section toggles:

    a.sidebar-link, .comments-link a {
      color: #ffffff!important;
      background-color: #888eb2;
    }
    
    a.sidebar-link:hover, .comments-link a:hover {
      color: #E3AF01!important;
    }
    
    .comments-link .tail {
      border-top-color: #888eb2;
    }

    As for changing the text in the comment toggle: I'm not saying that it is impossible with CSS (in some browsers at least) but it would be likely to create more problems than it fixes. Have you checked the theme options? Sometimes theme authors let you customise certain areas from the dashboard.

  10. That worked fine, thanks)

    As for changing the comment toggle text, as far as I can tell, I'm pretty sure there's no way to change that in the theme options. I can live with it for now).

    Last question (and again, feel free to ignore this if you need to), but can I add the same color scheme to the next/previous arrows that show up on single posts? I just now tried to do it myself by copying bits of your code but couldn't get it. I'm guessing the icon itself might be an image and not editable?

    Thanks again for all your help and patience!

  11. This one would be tough to guess as the CSS actually throws the original element way off the screen so you can't see it and then inserts the arrow and circle background - it's not something you can find in the HTML to begin with. It's also not impossible to change though, so here goes:

    .site-content #nav-below .nav-previous a:before,
    .site-content #nav-below .nav-next a:before,
    .site-content #image-navigation .nav-previous a:before,
    .site-content #image-navigation .nav-next a:before {
      background-color:#888eb2;
    }
    
    .site-content #nav-below .nav-previous a:hover:before,
    .site-content #nav-below .nav-next a:hover:before,
    .site-content #image-navigation .nav-previous a:hover:before,
    .site-content #image-navigation .nav-next a:hover:before {
      color:#E3AF01;
    }

    I copied the selectors straight out of the CSS for the theme so it should work wherever else they appear (when navigating between images by the looks of it!)

  12. Awesome. Fantastic, that worked great) Your help is very much appreciated!

Topic Closed

This topic has been closed to new replies.

About this Topic