Theme 2014 Changing Menu Color/White Space Usage

  • Author
    Posts
  • #3150554

    Hi there,

    Two Questions:

    1. Can I change the main menu color in Theme 2014?

    2. I’m not sure why the spacing is so odd on my site. The content is not at all making good use of the whitespace on the homepage. Can I move it UP to be in align with the sidebar menu and can the column be wider to take up more horizontal space?

    Thanks in advance for any insights!

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

    #3150608

    elizazh
    Member

    Hi @alfredadlerinstitute,

    Do you have a premium or a business plan with WordPress.com? These plan will enable you to add custom css to your theme and solve these problems.

    #3150702

    I have the Premium Plan.

    #3150713

    timethief
    Member

    What is the URL of the site on the Premium plan?

    As said above custom CSS is part of Custom Design, which is a feature of the WordPress.com Premium and WordPress.com Business plans. To upgrade see here https://wordpress.com/pricing

    If you have the required upgrade then to post into the CSS customization forum please by using this link https://en.forums.wordpress.com/forum/css-customization/#new-post

    #3150714

    timethief
    Member

    Yikes! I do apologize. This is the CSS forum. All we need is the URL of the site with the premium plan as http://familycouselling.wordpress.com/ is on the free plan.

    #3150804

    I definitely have the premium plan. There was an error early on and I don’t know why it is still showing up. Add an “n” to counselling. So: http://www.familycounselling.wordpress.com

    #3150814

    Sorry, I don’t think that’s right either. My site, even with the misspelled url (familycounselling.wordpress.com) says plan:premium just beneath it. I upgraded specifically to be able to get CSS help.

    #3150820

    timethief
    Member

    Hi again,

    All threads posted into this CSS customization forum get Staff responses. Please be patient while waiting for their help.

    #3150840
    #3151147

    elizazh
    Member

    Hi @alfredadlerinstitute,

    Do you want to change the main menu links color or the background color? What is the new color you’d like to implement?

    For the space, you can try with this:

    .content-area, .content-sidebar {
        padding-top: 0;
    }
    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
        margin: 0 auto;
        margin-right: auto;
        max-width: 100%;
    }

    Let me know if that helps.

    #3151149

    elizazh
    Member

    I’m sorry, just this should be enough for the space:

    .content-area, .content-sidebar {
        padding-top: 0;
    }
    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
        max-width: 100%;
    }
    #3151240

    Thanks, the CSS for the space fix was perfect.

    1. I would like the option to change the topside menu (not sidebar) to a bright green. I am trying to build a website for a colleague that approximates his old one, so I need the option to change that portion. (If it helps, this is the site: http://www.family-counselling.org/)

    2. I would like the submenu items to stay open on the sidebar – almost like an outline. I would only want to do that with two levels (main and first submenu level). When I tried to accomplish it before it was really cumbersome. If that doesn’t work, I’ll tell you how I tried to accomplish it with widgets and perhaps you could help me style it better.

    3. I don’t understand why the background image only shows on the right side of the site…

    Thanks so much!

    #3151659

    dkmyta
    Staff

    Hey there!

    I would like the option to change the topside menu (not sidebar) to a bright green.

    Based on the link provided I am assuming that you are wanting the background-color of the main menu to be the same color as the old site. I ran a quick image of this color through a color decoder and determined the color to be #64CF32. It may be a little off so if you would like to run it through yourself you can do so with an image of the color at the following link: https://html-color-codes.info/colors-from-image/#

    In order to apply this color to this menu section try this out:

    .site-header {
         background-color: #64CF32;
    }
    

    I would like the submenu items to stay open on the sidebar – almost like an outline.

    I am not sure I fully understand what you are wanting here, but based on your example again I see the sub-menu items on the sidebar menu are always visible. Am I correct in assuming you are wanting each submenu item visible, tabbed over and just below the main menu item instead of visible just on hover?

    I don’t understand why the background image only shows on the right side of the site…

    In order to centre your page content and have the background image display on both side apply the following code:

    .site {
        margin: auto;
    }
    

    Hoping this helps!

    Cheers

    #3151862

    You are a champion, thank you. Menu color is great for now – now I have a vehicle for changing it as I need to.

    Background showing on both sides! Can I tweak it to make the margins wider on the sides?

    Yes, your understanding of what I want for the menu is correct.

    Thanks for making this so easy.

    #3151915

    elizazh
    Member

    Hi @alfredadlerinstitute,

    Here is my suggestion for your sidemenu:

    .secondary-navigation ul ul {
        background-color: #ffffff !important;
        position: relative;
        left: 0;
    }
    .secondary-navigation ul li:hover > ul, .secondary-navigation ul li.focus > ul {
        left: 0;
    }

    Let me know how it goes with this code.

    #3151920

    elizazh
    Member

    I’m not sure if I understand correctly for the margins to be wider on both sides, but if it is what I think then you can edit this code:

    .site {
        margin: auto;
    }

    to

    .site {
        margin: auto;
        max-width: 1000px;
    }

    And you can of course change the value to whatever you like.

    #3151962

    Great – background width on the sides is now perfect! The sidebar menu is also coming along well.

    1. Because there are so many items, can I reduce the space between them?
    2. Can I get rid of the top line (actual black line) above “Home”?
    3. It may be impossible to remove the little arrow next to the top level menu items, but it
    is obviously no longer necessary

    Great service, thank you!

    #3152105

    dkmyta
    Staff

    Hey!

    Because there are so many items, can I reduce the space between them?

    You can reduce the space between each menu item by adjusting the padding with the following code:

    .secondary-navigation a {
        padding: 5px 30px;
    }
    

    The first value (5px) is the padding for the top and bottom and the second value (30px) if for the right and left padding.

    Can I get rid of the top line (actual black line) above “Home”?

    In order to remove the top border from the “Home” menu item in the sidebar apply this code:

    #menu-item-245 {
        border-top: none;
    }
    

    It may be impossible to remove the little arrow next to the top level menu…

    Nope, it is possible to do so with the following code:

    #menu-sidebar-menu a:after {
        display: none;
    }
    

    Let me know if this all works for you or if you need any further help, always happy to lend a hand:)

    Cheers

    #3153423

    Hi there, all your help has been fantastic. I’m working on the finishing touches now.

    1. Can I reduce the space between headings (I regularly use H5 and then H6 on my pages)? I’d like the distance between them to be the same as between a heading and body content.

    2. The “read more” option doesn’t work on my pages. (See: https://wordpress.com/page/familycouselling.wordpress.com/168 for example). Is it possible since I’m using pages and not posts?

    3. I’d really like to lose the “search” symbol and move my title image up a little so that the top of the title image is where the bottom of the search icon is now.

    Thanks for all your help. I’m almost finished!

    #3154009

    dkmyta
    Staff

    Hey again!

    Can I reduce the space between headings (I regularly use H5 and then H6 on my pages)

    I think I’m grasping what your saying – and if so the follow CSS should do the trick:

    h6 {
        margin-top: 12px;
    }
    

    The “read more” option doesn’t work on my pages…

    Yes, typically you are correct however, the “read more” tag is available for a select number of themes. If it is not available for you it is possible that your theme is unfortunately not one of them. As alternative you may want to consider Pagination instead. For information on this topic please refer to the follow documentation: https://en.support.wordpress.com/nextpage/

    I’d really like to lose the “search” symbol and move my title image up a little so that the top of the title image is where the bottom of the search icon is now.

    I am not sure I am fully understanding exactly what you are looking for here – if you could describe this a little further I think we may be able to work out a solution for you.

    Looking forward to your response,

    Cheers

The topic ‘Theme 2014 Changing Menu Color/White Space Usage’ is closed to new replies.