Need help? Check out our Support site, then


Autofocus - How to change color of navbar?

  1. Hi all,

    I have 2 questions:
    1. My navbar switched to the right. I want it to be like a line below the header image. What should I do?
    2. How can I change the color of the text in the navbar? I tried to do it via the CSS-Sheet but nothing happens. What do I wrong?

    The adress of my blog: http://www.gelebtegeschichte.wordpress.com

    Thanks for your help!

    Best,
    Katha

    The blog I need help with is lebensgeschichtentv.wordpress.de.

  2. 1. My navbar switched to the right. I want it to be like a line below the header image. What should I do?

    The navbar in AutoFocus is setup to display just after the #header area in the theme which is setup with a 595px width by default.

    I see that you aren't using a site title or tagline, so you can hide the #header area and that will also work to get rid of the space it was taking up:

    #header {
    	display: none;
    }

    You may also want to tighten up the space below your header image:

    #header-image {
    	height: 165px;
    }
  3. 2. How can I change the color of the text in the navbar? I tried to do it via the CSS-Sheet but nothing happens. What do I wrong?

    First, note that you should not copy and paste the entire original theme stylesheet into the Appearance → Custom Design → CSS editor. You should just add in the CSS for changes you want to make there.

    To change the font color in the navbar in the AutoFocus theme, you could add this to your Appearance → Custom Design → CSS:

    #access a,
    div.menu a {
    	color: saddlebrown;
    }

    Adjust the color name as necessary.

  4. The header and color changes worked perfectly. Thank you so much!
    Only the menu-bar ist still not in a line below the header. Here is how it looks now: http://gelebtegeschichte.wordpress.com/ Do you have any idea how I could aligne it below the header?

    Best,
    Katha

  5. Try making the menu container a bit wider, like this:

    #access,
    div.menu {
    	width: 800px;
    }

    Do think about removing everything from the Appearance → Custom Design → CSS and just adding back the CSS for the changes. It will make it much easier to edit and manage later.

  6. Thank you, it worked!

Topic Closed

This topic has been closed to new replies.

About this Topic