Button in/after mainmenu

Rate this topic: Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.
GK User
Fri Feb 24, 2017 7:13 pm
Reply with quote
Report this post
Like the Uber website (see attached), I'm trying to find a way to get a button to be the last "menu" item:
- I tried adding CSS to only that menu item / didn't work
- I created a module with the button, but couldn't assign the module to the "mainmenu" position, since it is not available.

Any thoughts on how to accomplish this?
User avatar
Senior Boarder

teitbite
Mon Feb 27, 2017 7:37 pm
Reply with quote
Report this post
Hi

Easiest would be with CSS. Just add a class "floatright" to this menu item and than to override.css this class:

Code: Select all
.floatright {
    float: right;
}
User avatar
Moderator

GK User
Mon Feb 27, 2017 8:55 pm
Reply with quote
Report this post
Maybe I'm misunderstanding something but it is not working for me.
See below the "current view"
CurrentView.JPG

Also the Menu Item CSS
menuCSS.JPG

And the Override CSS
OverrideCSS.JPG


I'm not worried about the color of the text...that is fine, but I need "Be A Supplier" to be in a button box.
User avatar
Senior Boarder

teitbite
Wed Mar 01, 2017 11:47 am
Reply with quote
Report this post
Hi

Please tell me the url to Your site. I'll see why this css is not working.
User avatar
Moderator

GK User
Wed Mar 01, 2017 12:35 pm
Reply with quote
Report this post
User avatar
Senior Boarder

teitbite
Fri Mar 03, 2017 12:16 pm
Reply with quote
Report this post
Hi

The class was not added to the menu item, so that's why it's not working. Any way, button is on ride side already, so it would not affect it.

To make it stand out use it's personal ID as a css selector:

Code: Select all
#menu1240 {
background-color: blue;
box-sizing: border-box;
padding: 10px;
color: #fff;
}
User avatar
Moderator

GK User
Fri Mar 03, 2017 2:24 pm
Reply with quote
Report this post
better.JPG
Thank you....working better, but not perfect. For some reason it trunkates the right hand side, see image.

Also, just wondering...is there a simple way to add CSS to use "white" as a hover color on the text instead of the blue, but only on this button?
User avatar
Senior Boarder

teitbite
Tue Mar 07, 2017 4:06 pm
Reply with quote
Report this post
Hi

Use this code than:

Code: Select all
#menu1240 {
background-color: blue;
box-sizing: border-box;
padding: 10px !important;
color: #fff !important;
transition: all 0.4s ease-out 0s;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
}

#menu1240:hover {
color: blue !important;
background-color: #fff !important
}
User avatar
Moderator

GK User
Tue Mar 07, 2017 5:10 pm
Reply with quote
Report this post
Excellent. Thanks works great. Had to update the padding to:
padding: 0px 10px
So that the text is inline with the other menu items, but works great. Thanks again.
User avatar
Senior Boarder

teitbite
Wed Mar 08, 2017 11:17 am
Reply with quote
Report this post
Hi
Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.