Change the Menu colour

  • Author
    Posts
  • #123808
    lizakeunecke
    Member

    Hi,

    I didn’t decide if I like to use Wanderer yet, because I am wondering if there is a possibility to change the colour of the menu and heading.

    Thanks in advance.

    The blog I need help with is: (visible only to logged in users)

    #123878
    jleuze
    Theme Author

    Hi, you can change those with custom CSS, like this:

    .site-header,
    .aside-container {
        background: red;
    }
    #123889
    lizakeunecke
    Member
    Original poster

    Thank you, it works. But now, the field around “search” is still dark grey. How can I change this and the headline text colour?

    #123890
    lizakeunecke
    Member
    Original poster

    ok, maybe you can check my blog and see the problems.

    current questions:
    1) Whats the colour code of the text? because i would like to use this colour for the heading, the subheading, the widget text, the whole text in the menu “home, about” etc. even for the menu-symbol (basically everything that is white right now). Could you please help me? Would be amazing!

    #123892
    lizakeunecke
    Member
    Original poster

    and last questions I guess:
    2) Now, the title and subtitle of the blog aren’t in the middle of the grey area. It looks like there is more space under them than above. I would like to locate them in the midde but still on the left side.
    3) When you open the menu, the word “home” is located a little bit too high. I think this could be an improvement in general. So i think the list starts too high and should start at the same line “the blog” itself or the space/picture of the first blogpost starts. I hope you understand what I mean.

    That’s all and thank you so much!

    #123897
    jleuze
    Theme Author

    You can change the search BG like this:

    .widget {
        border-bottom: 1px solid #e8e8e8;
    }
    .widget_search {
        background: #e8e8e8;
    }

    Each of those text items has its own CSS rule, you’ll need to add these rules to override them:

    .site-title a,
    .site-description,
    .main-navigation a,
    .textwidget,
    .widget-title,
    .widget ul a {
        color: #000;
    }
    .menu-global {
        border-top: 2px solid #000;
    }

    This will center the title and description:

    .site-header {
        padding: 2% 0;
    }

    For the sidebar, this is the current padding rule:

    .aside-container {
        padding: 20px 0 60px;
    }

    You can adjust that first value, 20px, to move the sidebar lower if you want the menu and other widgets lower.

    #123937
    lizakeunecke
    Member
    Original poster

    Thank you so much! Everything works and I still love the blog.
    Only one text looks still different. It’s the word “Suchen..” and its colour.

    #123938
    lizakeunecke
    Member
    Original poster

    & Colour when you can click on sth for example on “home” etc. its kind of blue, possible to change?

    #123941
    jleuze
    Theme Author

    Is that for the search bar? That text is supposed to look different, that’s how its designed.

    & Colour when you can click on sth for example on “home” etc. its kind of blue, possible to change?

    I’m not sure what you are referring to.

    #123945
    lizakeunecke
    Member
    Original poster

    1st: I was just talking about the colour of the text in the search bar.
    2nd: When you open the menu and put the cursor on “home” or “Kontakt” etc. It turn in light blue to show that you can click on it. You know? I#d like to change that colour, too.

    #123979
    jleuze
    Theme Author

    OK, you can change the color of the search text like this:

    .search-field {
        color: #000;
    }

    And you can change the color of the menu hover with this:

    .main-navigation a:hover,
    .widget ul a:hover {
        color: red;
    }
  • The topic ‘Change the Menu colour’ is closed to new replies.