Help with button and menu formatting

[brettfish]

Hi! I need some assistance - I’ve checked the previous forum posts and either couldn’t find help or the provided solutions didn’t work.

URL is staging.bioloungepdx.com for reference.

1. . I have “book now” buttons in the header and footer. The formatting looks good on other pages but on the home page the base formatting doesn’t show up (the hover formatting, however, is fine). I can’t figure out where the conflict is in the CSS on the home page.

2. . For the main navigation menu, I’d like to remove the double down-arrow icon next to “Services” for the secondary level menu either altogether or be able to replace it with another icon

3. . For the main/first level menu items, for the hover effect, I’d like to highlight the whole link and “column” with a background color as opposed to the text color changing and the underline on hover

4. . For the sub-menu under “Services” - I’d like it to align right under the main item (so the left edges of both align), to remove the lines between each item, and on hover, highlight each sub-menu link/row with a background color as opposed to the text changing color on hover.

Thanks!

[friech]

Hi @brettfish,

Thank you for writing in, first off please check all your custom CSS here and resolve any found errors. I saw one issue in Theme Options > CSS where you miss adding a closing bracket on one of your @media queries. That’s the first step. Check if that resolves your buttons, if not, please provide us login credentials in a secure note so we can take a closer look.

After you clear your Theme Options > CSS with errors, please add this.

/*hide double down-arrow icon*/
.x-navbar .desktop .x-nav li>a>span:after {
	display: none;
}

/*top level menu item background color*/
.x-navbar .desktop .x-nav>li:not(:last-child)>a:hover {
	background-color: antiquewhite;
}
/*remove the underline on top menu on hover*/
.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
	    box-shadow: none !important;
}

/*align top menu and submenu*/
.masthead-inline .x-navbar .desktop .sub-menu {
	left: 0;
    right: auto;
    padding-left: 0;
    padding-right: 0;
}

/*remove lines on the submenu items*/
.x-navbar .desktop .sub-menu li:before,
.x-navbar .desktop .sub-menu li:after {
	background-color: rgba(80,80,80,0);
}
/*submenu item background color on hover*/
.desktop .sub-menu li {padding-left: 1.75em;}
.desktop .sub-menu li:hover {
	background-color: antiquewhite;
}

Read the comments to know what each line does. Replace the antiquewhite with your desired color.

Cheers!

[brettfish]

Hi, thanks for all the CSS help that worked perfectly with the menus

I fixed the CSS as you mentioned but on the home page (and ONLY on the home page) the header button still isn’t rendering properly, and I don’t see any conflicting CSS on the home page specifically that would cause the issue

Thanks!

[rad]

Hi @brettfish,

The account you have provided have no access to Pro builder so I can’t really check it. Please grant an admin capability.

Thanks!

[brettfish]

Access updated to admin!

[christian]

Hey @brettfish,

Your button styles do not work because you’ve only applied the style to the hover state. Putting a button inside a link is also syntactically incorrect. The CSS needs to be applied to the link. If you don’t already know, you can add class to the menu item so you can target it predictably.

Please note that this is not an issue with the theme, therefore, we will not continue supporting this custom button placed inside a link. The button should also not be there and if you’ll continue using this setup, you’ll need to forward this to a third party developer for assistance.

Thanks.

[brettfish]

Thanks for your help - that button setup was suggested and provided by your team at Themeco, and I’ve used it in several sites without issue except this one. And it’s not just on hover - the code in there is:

/* Main Navigation Button */

#navbtn {
background-color: #8cac89;
border: 2px solid #8cac89;
border-radius: 0.3em;
color: #ffffff;
margin-top: -15px;
font-weight: bold;
padding: 0.575em 2.5em 0.575em 2.5em;
font-size: 0.9em;
font-family: “Lato”, Lato, sans-serif;
}

#navbtn:hover {
background-color: #ffffff;
border: 2px solid #8cac89;
border-radius: 0.3em;
color: #474b4f;
margin-top: -15px;
padding: 0.575em 2.5em 0.575em 2.5em;
font-size: 0.9em;
font-weight: bold;
}

[friech]

Hi @brettfish,

I found the issue, it’s not easy but I found it. Its an invalid CSS under the Section 5 and Map element CSS element area (on homepage).

max-height: 500px; that is not a valid Element CSS code.

I did go ahead and commented that out and the button on the homepage looks fine now.

Features - Element CSS

Cheers!