• Need some CSS help to resolve some things. I feel like I’ve already used a considerable amount of CSS, as a novice thats scary…but still need more.

    1. The menu bar is obviously white. When you hover over ‘contact me’, you can see that Collaborations is in the drop down, but you can’t select it. Can’t figure out why.

    2. Is there a way to get all the three ‘front page featured’ items smaller?

    3. On the mobile responsive menus, the menu background is teal. How can I change that to the same color scheme as the desktop version,(background white, text black) including the hover color (or more accurately, the color it is when you keep your thumb pressed on it).

    TIA!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter kcormier

    (@kcormier)

    I half figured out my 2nd question. If I use
    .home img {
    max-width: 60%;
    height: auto;
    }
    .home img {
    margin-left: 45px;

    }
    it works for those featured images, but it also changes the site logo.
    Any way around that?

    Hi there,

    1. The menu bar is obviously white. When you hover over ‘contact me’, you can see that Collaborations is in the drop down, but you can’t select it. Can’t figure out why.

    Some of the CSS you added has resulted in a gap between the menu bar and the sub-menu. Meaning if you move your mouse from the main menu to the sub-menu items, the cursor passes over that gap and the menu loses focus. I can get to the sub-menu by moving my mouse very fast.

    The CSS that appears to be causing the problem is:

    .main-navigation ul li a {
        font-size: 14px;
    }

    Add the following right underneath that code:

    .main-navigation ul ul {
        top: initial;
    }

    That should cause the sub-menu to overlap the main menu slightly, preventing this from happening. It had this overlap before the font-change.

    2. Is there a way to get all the three ‘front page featured’ items smaller?

    it works for those featured images, but it also changes the site logo.

    It looks like you’ve figured this out, including the .featured-page class to make your selector more specific.

    3. On the mobile responsive menus, the menu background is teal. How can I change that to the same color scheme as the desktop version,(background white, text black) including the hover color (or more accurately, the color it is when you keep your thumb pressed on it).

    It looks like you’ve already figured this out as well, but let me know if there’s still something that doesn’t look the way you want it to.

    ========

    Unrelated to your questions, but I see you also have this code added:

    .site-title {
        position: absolute;
        left: -9999px;
        top: -999px;
    }

    It’s not necessary to use CSS to hide your site title like that. If you go to the Site Identity section of the Customizer, there’s a box you can uncheck if you don’t want the title to be visible on the page.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘A few things I need help with (CSS)’ is closed to new replies.