WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Can't get HTML website menu to match WordPress menu- CSS (13 posts)

  1. Ty
    Member
    Posted 1 year ago #

    Hi Everyone,

    Recently I have been trying to help design an HTML site with a companion WordPress blog. So far everything is going well, except I can't get the menu's to match up. Any tips or suggestions on possibly making the menu look seamless would be great. Below are the URL's for both the sites and links to both CSS sheets:
    Site: https://www.goldenrulevineyards.com/
    CSS: https://www.goldenrulevineyards.com/CSS/GRVMainStyle.css

    Site: https://www.goldenrulevineyards.com/blog/
    CSS: https://www.goldenrulevineyards.com/blog/wp-content/themes/Twenty%20Eleven%20Child/style.css

    Thank you very much for any help and guidance you may provide!

  2. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    So you want the menu on this page https://www.goldenrulevineyards.com/blog/

    To look like the menu on this page
    https://www.goldenrulevineyards.com/ ?

  3. Ty
    Member
    Posted 1 year ago #

    Yah, that was the ultimate goal, so a visitor clicking in from the html would really even notice it went to a wordpress install.

  4. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    How are you applying the purple-ish background to the navigation, on the /blog page?

  5. Ty
    Member
    Posted 1 year ago #

    Using linear gradient's:
    background: #5F0161; /* Show a solid color for older browsers */

    background: -moz-linear-gradient(#5F0161, #0a0a0a);

    background: -o-linear-gradient(#5F0161, #0a0a0a);

    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5F0161), to(#0a0a0a)); /* older webkit syntax */

    background: -webkit-linear-gradient(#5F0161, #0a0a0a);

    Almost all the CSS is identical, I just can't get the visual separation between each item or get the menu height to be identical.

  6. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    To which element are you applying that background?

    I think the problem is you're adding this background image to the whole navigation menu, rather than singular list elements or anchor tags within the lists.

  7. Ty
    Member
    Posted 1 year ago #

    Well I am trying to apply only to the list items and sub-list items, I may have placed the linear code under to many of the access div's?
    Ideally the look of five distinct menu items with border-radius rounded corners would be great. As of now, it is just one large purple bar, and the border radius is only noticeable on hover

  8. Ty
    Member
    Posted 1 year ago #

    ok, I tried to adjust the linear and it did make a difference, looks much better!

  9. Ty
    Member
    Posted 1 year ago #

    now for the line height, do you know what section I should edit to make both sites have identical menu height?

  10. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Have you solved the issue?

  11. Ty
    Member
    Posted 1 year ago #

    well you made an excellent suggestion about the linear gradient, but I am still not sure what I am doing wrong on the line height issue? The height of both menus is noticeably different, but I thought my CSS has both at 30px? Not sure.
    Thank you for helping me Andrew

  12. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    For the line height, you have added a padding top to the anchor tags within each list item. Remove this.

    You can simply spot-the-difference between the stylesheets on the pages that do and do not work, for future occurrence.

  13. Ty
    Member
    Posted 1 year ago #

    ok, problem solved...thank you much

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.