-
AuthorPosts
-
December 1, 2014 at 2:44 am #360530
Hi there!
I am designing a type of portfolio website for a friend of mine and I need some help on the menu. I have uploaded a basic header background and uploaded the logo. This works beautifully with the theme and the transparent background is awesome. Now the problem is how do I insert the different menu fields and make them clickable?
The website is: http://www.alextomaszewski.com
One option I am thinking of doing is getting rid of the header all together and including an advanced layer slider and just add the different items and logo as a layer. If I were to go with this option, what do I need to do to delete the header from all pages? I am assuming I can input some custom css. I would prefer keeping the header as is and including the menu items. Please see this link for what I am looking to do as a final result:
http://alextomaszewski.com/wp-content/uploads/2014/12/00-Menu-Header-Reference.jpg
Any help on this is much appreciated! Thank you so much as always Enfold Support! You guys are awesome!
Benjamin
December 1, 2014 at 5:20 pm #360888Hi a00109943!
It would be easiest to just use the default menu and give it some CSS to make it big like that. You can add a
<br />
tag in the navigation labels to do a line break.Keep in mind how you want it to display on mobiles too. What your trying to do would not play well responsively.
Regards,
ElliottDecember 2, 2014 at 4:37 am #361270Hi Elliott! Thank you for the suggestion! I have made some changes to the header. How would I go about inserting that break so I can have Film on top, then Portfolio on the bottom?
Thanks again!
Ben
December 2, 2014 at 5:53 pm #361605Hi!
Click on the dropdown arrow when editing your menu item and you can change the navigation label.
Cheers!
ElliottDecember 2, 2014 at 6:51 pm #361685Thanks for the quick reply Elliott!
I made the change but now the second word is way down there. How would I center the top and bottom word and have maybe 1-5px between them?
Thanks!
Ben
December 3, 2014 at 12:06 am #361862Hey!
I don’t see any links in your source code. Go ahead and add some in and we’ll take a look.
The CSS your wanting is probably something like this.
.menu > li > a { line-height: 20px !important; padding-top: 20px !important; }
Cheers!
Elliott- This reply was modified 10 years ago by Elliott.
December 3, 2014 at 1:47 am #361899Thanks Again Elliott!
So far so good! The only thing now is to get the words centered horizontally and vertically. We are soooo close!
Thanks again!
Ben
December 3, 2014 at 7:04 pm #362378Hey!
Add this.
.main_menu li { text-align: center !important; }
You would just increase the top padding a bit more to center them vertically.
Regards,
ElliottDecember 3, 2014 at 11:24 pm #362574Thats excellent!
Very useful indeed! Now the only thing left is to be able to spread the menu items across the top. How do I customize the px distance from right or left in the header. I know it is currently set up to the right, but I would like it to align beside the logo and go toward the right. Like the original picture.
this is the last item for this I promise! You are most appreciated!!!
Thanks again!
Ben
December 4, 2014 at 8:30 pm #363206Hey!
Add this.
.main_menu { right: auto !important; left: 200px !important; }
Cheers!
Elliott -
AuthorPosts
- You must be logged in to reply to this topic.