- This topic has 19 replies, 3 voices, and was last updated 6 years, 11 months ago by
.
-
Posts
-
I am trying to do three things.
1) I need to get a couple of custom buttons in the main menu like this.
2) I need to be able to adjust the vertical position of the menu in the header
3) I would like to add a shadow to the overall header area that is full width.
Thanks!
CDSCustomer Support
Hi Chris,
1) Some CSS buttons you can use: https://docs.generatepress.com/article/adding-buttons/
Then you can add the classes to the Custom Classes field: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes2) I assume your menu is currently set to float right? Then try adjusting it with combination of Header Padding (https://docs.generatepress.com/article/header-padding/) and menu item height (https://docs.generatepress.com/article/menu-item-height-width/)
3) Try some CSS like this:
.site-header { -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); }Tune it using this site: http://www.cssmatic.com/box-shadow
Let me know if you need more info. A link to your site might also help too 🙂
http://gtg2017.giantishere.com/
1) This is the CSS I have in place. The CSS for the text color, the padding and the hover states are not working in the header. This seems like it’s needs a way to target the header menu as well? Not sure.
.button.gtg-btn-red-header,
.button.gtg-btn-red-header:visited {
color: #ffffff !important;
background-color: #CF0A2C !important;
padding: 3px 5px !important;
margin: 0px !important;
border-radius: 12px! important;
}
.button.gtg-btn-red-header:hover,
.button.gtg-btn-red-header:active {
background-color: #97021c;
color: #ffffff !important;
}2) I was able to get the alignment right, but adjusting the height of the menu items adds the space to the top and bottom which makes the bottom of the header too large.
3) The shadow will show in the back end editor but dones not show on the frontent after cache dump and new browser.
Backend.
Frontend
http://i.imgur.com/LwjNVkS.jpg.Can you provide a link to your site?
Top of the last reply. =)
http://gtg2017.giantishere.com/Sorry missed that.
1) Hmm I don’t see the second block of code (hover, active) being added?
I don’t think you want to add padding or margin to that. Adjusting the menu item height should do the trick.2) Try reducing the menu item height, then use this CSS to push the logo down:
.site-header .header-image { padding-top: 20px; }3) Don’t see the code being added. Any caching plugin? There are no code that only works in the backend.
Here’s the code that’s being used for the menu item. The hover and the padding are not working. Or the font color.
CDS
For the shadow, I can see the CSS loading. I have no caching software running yet. Just the theme so far.
And it does show on the back but not the front. Super strange.
Lead Developer
Shadows can sometimes be hidden behind other elements.
Try this:
.site-header { z-index: 5; }1) the button CSS is not being picked up as far as I can tell. I can see it in there but like the color: #FFFFFF !important; is not working for whatever reason.
2) I just need to move the text menu down
3) Shadow shows in the elementor page editor but not on the front end.
I’m pretty much just banging my head against the wall at this point. I’m at the limit of my knowledge. Sorry.
1) Still outstanding
2) Still outstanding
3) Fixed!
1) You have # entered as the custom link URL for that menu item. Not sure why you did that? Try adding the actual link to it and entered SHOP NOW as link text. When I did that and used your code everything works.
2) Try this:
.main-navigation { padding-top: 20px; }1) I have everything like this.
It doesn’t appear to be grabbing the font color, the hover color or the padding properly.
The button should look like this.
2) This worked. Do I need to use media queries to make the padding responsive then?
.main-navigation { padding-top: 50px; } @media (max-width: 768px) { .main-navigation { padding-top: 15px; background-color: #FFFFFF; } .main-navigation .main-nav ul li a { line-height: 40px; } }1) Can you actually try using the selector Tom suggested in this post:
https://generatepress.com/forums/topic/targeting-a-single-navigation-menu-item-to-create-a-button/page/2/#post-268607We might need to be super specific…
2) Looks like you are using mobile so it shouldn’t make a difference.
Okay. Looks like we got it.
It now looks like the button font is larger. Can you please see if you can help me track that down? I don’t see it hard coded anywhere.
Thank again for your STELLAR SUPPORT!!
=)
CDS
- You must be logged in to reply to this topic.