- This topic has 6 replies, 3 voices, and was last updated 6 years, 2 months ago by Tom.
-
AuthorPosts
-
January 23, 2018 at 12:14 pm #478277William
Hi,
I’ve been playing around with primary and secondary navigation, as well as header widgets to achieve a specific look for the top part of my website, but I can’t quite seem to hit the mark, although I’m getting pretty close. I figured I’d draw what I’m looking for using Paint to better illustrate what I want. Note that the lines on the picture are not to be displayed, they just illustrate the various sections. Here it is :
The part I’m interested in is the one in red, the (contained) header and navigations. I think the primary menu is all set and does not need to change and only two changes are needed to reach my target.
First, there’s a header widget that contains my secondary menu, but I would like it to be horizontal instead of vertical. The widget is called “Navigation Menu”, I don’t know if it comes with WordPress or with GeneratePress. I tried using the secondary navigation instead and having it float right, but it then moves to the right of the social icons instead of underneath them. I’m guessing the header widget is just a list somewhere and I could change it using “display: inline;” if I can find the correct css selector to use that on so maybe that’s easier than using the secondary navigation and moving it below the social icons.
Second, the logo would need to be vertically centered inside the header, but I’m not really sure how to go about that.
Any pointers would be appreciated, maybe just some css selectors I can mess around with.
Thank you!January 23, 2018 at 12:15 pm #478280WilliamHmm, it looks like I messed up the image link. Here it is : https://ibb.co/c08RpG
January 23, 2018 at 7:11 pm #478457LeoStaffCustomer SupportHi there,
Are you able to link us to the site in question?
Thanks!
January 23, 2018 at 9:14 pm #478516WilliamHello,
I apologize, I could have sworn that I did when creating the thread. My bad, here it is : https://www.itwillbeapps.com
Thank you!
January 23, 2018 at 11:26 pm #478564TomLead DeveloperLead DeveloperHi there,
First, set the Lightweight Social Icons widget to right alignment.
Then add this CSS:
.site-logo { margin-top: 15px; } .header-widget .widget_nav_menu li { display: inline-block; margin: 0 20px; } .header-widget { max-width: 70%; } .header-widget .widget { margin-bottom: 0; }
Let me know ๐
January 24, 2018 at 9:22 am #479009WilliamPerfect! That’s exactly what I was looking for.
Thank you!
January 24, 2018 at 9:28 am #479016TomLead DeveloperLead DeveloperYou’re welcome ๐
-
AuthorPosts
- You must be logged in to reply to this topic.