Button in/after mainmenu
Rate this topic:
- 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?
- 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?
-
- 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:
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;
}
-
- 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"
Also the Menu Item CSS
And the Override CSS
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.
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.
-
- 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.
Please tell me the url to Your site. I'll see why this css is not working.
-
- Moderator
- GK User
- Wed Mar 01, 2017 12:35 pm
- Reply with quote
- Report this post
-
- 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:
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;
}
-
- 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?
-
- Senior Boarder
- teitbite
- Tue Mar 07, 2017 4:06 pm
- Reply with quote
- Report this post
Hi
Use this code than:
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
}
-
- 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.
padding: 0px 10px
So that the text is inline with the other menu items, but works great. Thanks again.
-
- 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
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
-
- Moderator
10 posts
• Page 1 of 1