- This topic has 12 replies, 2 voices, and was last updated 6 years, 6 months ago by 1simple.
- AuthorPosts
- March 9, 2018 at 3:07 pm #8995
1simpleParticipantIs there any way to change the location of the primary menu in the header? I want my navigation to appear below the logo, because currently it is wrapping onto 2 lines. Thanks.
March 9, 2018 at 6:08 pm #8996
Andrew MisplonKeymasterHi 🙂
Thanks for posting. You can center the header: https://purothemes.com/documentation/ultra-theme/customizer/theme-settings/header/#heading-header-layout.
Can you perhaps send a link to your site? I can assist with a little Custom CSS to get everything fitting a bit better. You can use the Private Reply checkbox when sending URL’s.
March 12, 2018 at 6:59 pm #9051
1simpleParticipantThis reply has been marked as private.March 12, 2018 at 8:21 pm #9052
Andrew MisplonKeymasterThanks for the update.
If you’re using Ultra Premium you can try adjust the Header Height setting at
Customize > Theme Design > Header > Height
.To adjust the header height in Ultra free you can try adding to Custom CSS/Additional CSS:
.site-header, .site-header .container, .site-header .site-branding-container, .main-navigation .menu-search { height: 56px } .main-navigation div>ul>li>a, .main-navigation .menu-search .search-icon:before { height: 56px; line-height: 56px } .main-navigation ul ul { top: 53px }
If you want to change the header height further, change all the 56px values. The last value must be 2px less than all the other values.
56 is just an example, the default is
112px
.March 12, 2018 at 10:18 pm #9053
1simpleParticipantThanks for your help. I confirm I am using the Premium version.
I tried your suggestion, but there is still too much space between the menu items and the bar at the bottom which comes up when you hover over the menu item.
I know that as you scroll down, this space gets narrower, but before any scrolling the navigation menu is too high for my purposes.
March 12, 2018 at 10:36 pm #9054
Andrew MisplonKeymasterThanks 🙂
I can get back into this tomorrow but my initial customisation attempt would be:
.main-navigation { height: 40px !important; } .main-navigation div>ul>li>a, .main-navigation .menu-search .search-icon:before { height: 40px !important; line-height: 40px !important; }
The above added to
Customize > Additional CSS
. The value in the first rule can be increased higher than the values in the second rule which need to remain the same. So you could have 60px in the first rule and 50px 50px in the second for a different look.Back tomorrow 🙂
March 12, 2018 at 10:45 pm #9055
1simpleParticipantMany thanks, I did try that example, the only potential issue is that the little hover bar was appearing above the menu, not below.
Thanks for your help anyway!
March 13, 2018 at 9:14 am #9056
Andrew MisplonKeymasterThanks for trying. If possible, please, can you temporarily bump my account to Admin so I can add the Custom CSS myself and see if I can get this close to finished for you. You could then make final size adjustments. You can delete my account when we’re done.
March 13, 2018 at 10:01 am #9057
1simpleParticipantHi, I’ve done that, many thanks for your assistance.
March 13, 2018 at 10:06 am #9058
Andrew MisplonKeymasterThanks, please, check now.
Combination of the setting at
Theme Design > Header > Height
and the rules within Additional CSS section.Please, let me know 🙂
March 13, 2018 at 11:32 am #9062
1simpleParticipantLooks great, thank you very much indeed!
March 13, 2018 at 11:35 am #9063
Andrew MisplonKeymasterSuper 🙂 Glad to hear that helped.
You can perhaps migrate the one CF7 rule you have at
Appearance > Custom CSS
toCustomize > Additional CSS
and deactivate that plugin. OR you could migrate all rules fromCustomize > Additional CSS
toAppearance > Custom CSS
and keep using the plugin, this is a good option if you find Custom CSS an easier space to work in, given the width available.March 13, 2018 at 9:40 pm #9068
1simpleParticipantWill take a look, thanks again.
- AuthorPosts
You must be logged in to reply to this topic.