- This topic has 6 replies, 3 voices, and was last updated 4 years, 5 months ago by Tom.
-
AuthorPosts
-
October 20, 2019 at 10:32 pm #1039985Kyle
Hi guys, big fan of the theme. Thanks for all that you’re doing!
I’m trying to recreate a custom theme for a client on your platform for stability and security. It doesn’t need to be exact, but I’m trying to get it pretty close. I’m getting there, but have a few small questions on the navigation menu:
First, here is the example site that I’m trying to recreate: http://camphill.edu/
1) Is there a way to wrap the text on the primary navigation (red text)? Currently if I increase the text size it only gets longer. This is low-priority, but I’d be curious for future menus as well.
2) The centering logo worked well, but the right-side menu item is awkwardly spaced from the logo. (“continuing education program”) Ideas?
3) On the “how to apply” button … how can I get that to float to the right? I can get it to either float or look like a button, but can’t get both to work. I’ve tried “float:right;”.
Many thanks for any insight you can offer!
October 21, 2019 at 1:42 am #1040064DavidStaffCustomer SupportHi there,
1 and 2 – try:
removing this CSS:
.main-navigation .menu-item-separator { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
and adding this:
.main-navigation li { flex: 0 0 20%; } .main-navigation .main-nav ul li a { line-height: 1.5em; padding: 20px; text-align: center; }
3. Float right should be fine – are you trying to add the hover arrow effect?
October 21, 2019 at 8:52 am #1040459KyleHi David, amazingly quick reply. Thank you!
1 & 2: nailed it, thank you! Don’t think I would have figured that out myself.
3: This is what I have so far. I assumed that the arrow effect was way over my head, so I was going to try to add some css animation to the button eventually. But if you know a site or resource to pass along for the arrow effect, that’s amazing. I don’t want to take up your time.
Anyway, regarding the float, this is what I have now to no effect, did I do something wrong?
@media (min-width:769px) {
.secondary-navigation .main-nav ul li.nav-button a {
float: right;
background-color: #d60034;
color: #ffffff;
padding:1em 9em 1em 1.2em;
line-height: 35px; /*this number will likely need to be adjusted*/
}
}October 21, 2019 at 9:02 am #1040467KyleOK, one other small request. Back to the primary navigation alignment: How would I get the menu items to center vertically (the second menu item, specifically)? I tried adding “align-items: center;”, but to no avail.
.main-navigation .main-nav ul li a {
line-height: 1.5em;
padding: 20px;
text-align: center;
align-items: center;
}Thanks again!
October 21, 2019 at 4:44 pm #1040780TomLead DeveloperLead DeveloperHi there,
Try changing this:
@media (min-width:769px) { .secondary-navigation .main-nav ul li.nav-button a { float: right; background-color: #d60034; color: #ffffff; padding:1em 9em 1em 1.2em; line-height: 35px; /*this number will likely need to be adjusted*/ } }
To this:
.secondary-navigation .main-nav ul li.nav-button a { background-color: #d60034; color: #ffffff; } .secondary-navigation li.nav-button { float: right; }
As for the last question, try this:
#primary-menu > ul { align-items: center; }
Let me know ๐
October 21, 2019 at 7:43 pm #1040866KyleAwesome. Thanks so much, sorry for the hand-holding, guys!
October 22, 2019 at 9:06 am #1041540TomLead DeveloperLead DeveloperI’m glad we could help! ๐
-
AuthorPosts
- You must be logged in to reply to this topic.