Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 19, 2015 at 9:43 pm #490411
    blancsolutions

    Hello Enfold community,

    I am trying to add a colored background to the top menu on my website. I’ve experimented with some CSS and I was able to get the font color right and change the background color directly behind the text. See website below for detail. I am trying to do two things.

    1. Remove the small border line that separates the top secondary menu from the logo area. So you would only see white space.

    2. Add a colored blue section (it would be a rectangle) that is behind the secondary menu items. This website below is a great example for what I am trying to accomplish. http://www.sps.edu/home

    As you can see, the top menu has the colored red background section, with some vertical and horizontal padding around it.

    I would like to keep it centered relative to the sidebar as it is now. The current location is perfect.

    As always, I appreciate any help you can give me and I thank you very much for your time.

    August 19, 2015 at 10:34 pm #490435
    elames

    Have you gone into Theme Options/ and General Styling? There is where you can set all the colors for the various elements on the page.

    August 20, 2015 at 7:57 pm #491051
    Andy

    Hey!

    the first link you have provided does not work for me. So not sure what you are trying to do.

    Best regards,
    Andy

    August 20, 2015 at 8:25 pm #491073
    blancsolutions

    Hey Andy,
    Sorry about that. That link was working yesterday. I sent two new links.

    The first link shows how the secondary menu has a different background color than the logo area but I only want that background section to be as wide as the menu items.

    The second link is a little harder to see but that is almost exactly how I would want mine to look. You can see the background color is different than the background pattern of the website.

    I hope this clarifies it a little, thanks.

    August 24, 2015 at 4:04 am #491992
    Ismael

    Hi!

    You can try this in the Quick CSS field:

    .av_secondary_right .container:before {
    content: '';
    background-color: blue;
    width: 300px;
    height: 32px;
    display: block;
    position: absolute;
    right: 0;
}

    Remove the background of the header meta container. If this is not what you’re looking for, a screenshot will help.

    Best regards,
    Ismael

    August 26, 2015 at 7:11 pm #493773
    blancsolutions

    I added that and I got the rest of the menu bar to disappear. However, I have two problems that I need to fix.

    1. The logo now looks off center because it was originally centered between the top menu bar and the main menu bar. Now that everything is white, the logo doesn’t look centered between the top of the home page and the main menu. Is there a way to re-center the logo?

    2. There is a little white gap between the between the yellow color of the main menu and the border of the menu. First, is there way to easily remove those menu borders? or is there a way to adjust the height of the menu so that it fills in that empty gap?

    I have added a temporary log in info below so that you can look at the CSS in the general styling. I added a bunch of little things and they’re all over the place so I’m not sure if some of it is even doing anything or not.

    I really appreciate the help so far, you guys are doing a great job. Thank you.

    August 28, 2015 at 10:52 am #494740
    Andy

    Hi!

    1. Go to Enfold->Header->Header Layout->Menu and Logo position and choose for example “Logo center, Menu below”.

    2. Are you talking about the thin separator line between the menu items? if yes you can remove it in Enfold->Header->Header Layout->”Separator between menu items”

    Regards,
    Andy

    August 28, 2015 at 4:35 pm #494962
    blancsolutions

    Sorry, I was not really clear on what I’m trying to do. I added links to two images below. You can see what the header area looks like before and after the changes. I would like for the logo to be vertically centered. As you can see there is a lot more whitespace above the logo than below it. I would also like to remove the white gap between the bottom of the menu bar and the grey border line below it. Thanks, hope that helps.

    August 29, 2015 at 10:02 am #495267
    Ismael

    Hey!

    1.) Use this to fix the logo alignment:

    #header_meta {
    width: 50%;
    right: 0;
    position: absolute;
}

    2.) Adjust the top padding of the main container:

    .html_header_top.html_header_topbar_active.html_header_sticky.html_bottom_nav_header #top #main {
    padding-top: 124px;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.