Support » Themes and Templates » Can't get HTML website menu to match WordPress menu- CSS

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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/ ?

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

    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

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

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Have you solved the issue?

    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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

    ok, problem solved…thank you much

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Can't get HTML website menu to match WordPress menu- CSS’ is closed to new replies.