Best Way to Add a Menu Button

Homepage › Community Forums › Aspire Theme Support › Best Way to Add a Menu Button

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 30, 2016 at 1:06 pm #19296
    B_David
    Customer

      Hi Team –

      Thanks for the great help as always!

      I’m trying to add a button to the first (left) menu item on my home page.

      I tried adding the code detailed in an earlier post ( https://appfinite.com/topic/buttons-on-menusnav-bar/ ) along with the suggested enhancements. The button class is .button-menu and the rest of the code is the same as suggested, and the class is entered on the “Start Here” menu item.

      The descendant selectors appear to be working – hover and active produce the results expected, but the button itself doesn’t appear in the menu.

      Any ideas on what I may have missed? Website is patschuler.com. Really appreciate any help you can offer.

      Thanks!

      September 4, 2016 at 2:15 pm #19338
      Wes
      Moderator

        I just took a look at your code and it looks like there is an error right above the button area in your css. If you look on line 3237 there is an extra Bracket } that needs to be removed – 

        /* ## Menu Button  -  From https://appfinite.com/topic/buttons-on-menusnav-bar/
--------------------------------------------- */

}
.button-menu {
	background-color: #ff8000;
	-webkit-border-top-left-radius: 3px;
	border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;
	border: 1px solid #fff;
	display: inline-block;
	color: #ffffff;
	font-size: 13px;
	height: 30px;
	line-height: 30px;
	width: 58px;
	text-align: center;
}

        Once I removed that, I removed some of the lines in your code and added some padding. Here was the result – http://i.imgur.com/tQXmxFk.png

        Is that how you want it to look? If so, just change the above code to look like this – 

        .button-menu {
	background-color: #ff8000;
	-webkit-border-top-left-radius: 3px;
	border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;
	border: 1px solid #fff;
	display: inline-block;
	color: #ffffff;
	font-size: 13px;
	padding: 10px 15px;
	text-align: center;
}

        You can adjust it if you need. Let me know if that works.

        September 6, 2016 at 4:25 pm #19347
        B_David
        Customer

          Thanks Wes – this is awesome! It’s exactly what I had in mind. And thanks for finding that pesky bracket. : )

          One last thing: I reset the hover color to white which works well, and when you hover over the button and the text, the text goes to orange – which is perfect. But you have to hold the mouse pointer right over the text in order for it to display in the button (or it ends up looking confusing/unfinished).

          I’m assuming the text fade-in is controlled by the .genesis-nav-menu class. Is there a way to disable it for just this button? Or, even better, to trigger the text fade-up when hovering over the button area instead of the text area?

          Many thanks for all the great help! (patschuler.com)

          September 7, 2016 at 10:56 pm #19370
          Wes
          Moderator

            I noticed that when you hover over the button itself, (but not the Text) that the entire button AND Text turns White all together, but if you hover over the Text it turns orange while the background remains white.

            So it would probably be easier if you could let me know exactly how you would want the button and text to look without being hovered over (just regular/static )…..And then let me know how you want it to look when it’s being hovered over. That way I can give you the exact code/adjustments needed to prevent the way it’s showing now.

            September 9, 2016 at 4:48 pm #19386
            B_David
            Customer

              Excellent suggestion, Wes – many thanks! And thanks for being patient on this one. : )

              Static: orange button, white text (as it appears currently).

              Hover: white button, orange text

              And if possible, I’d like to ‘bold’ each of the menu items (menu, menu hover, button, button hover) if you could just point me in the right direction.

              Many thanks for all your great help!

              September 12, 2016 at 10:49 pm #19408
              Wes
              Moderator

                Looks like you got most of it working already. To add a Bolder font, take a look at line 1293 in your CSS and change the font-weight from 300 to either 400, 600, or 700+ – 

                .genesis-nav-menu a {
	color: #fff;
	display: block;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 2px;
	padding: 30px 15px;
	text-transform: uppercase;
}
                September 15, 2016 at 4:14 pm #19442
                B_David
                Customer

                  Thanks so much, Wes! Everything is perfect now. 馃檪

                  Thanks again for all your great help!

                  September 16, 2016 at 12:53 pm #19453
                  Wes
                  Moderator

                    You’re Welcome!

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