- This topic has 13 replies, 5 voices, and was last updated 9 years, 5 months ago by Andrew Misplon.
- AuthorPosts
- May 26, 2015 at 5:22 pm #1628
KristenTParticipantHiya
Your theme is great but alignment has always been a bit of a problem.
If you check out Konstruktiver Journalismus you will see that the header is quite strangely aligned. I tried activating and deactivating all kinds of options but it didn’t help.
ThanksMay 26, 2015 at 5:59 pm #1629
Andrew MisplonKeymasterHi Kristen
Thanks for your support. Sorry to hear you’ve run into a problem.
You may have noticed the menu hover style, it places a blue underline at the bottom of the header. In order to do that, Ultra sets a line height for the menu equal to the height of the header. The downside is that this style of menu doesn’t handle overlap well. Overlap is what’s happening now. If your menu had fewer items the problem would resolve.
By default the logo/site title area is allow 35% of the header and the menu the rest. Depending on your logo/site title, we can adjust the allowed space for each.
Install Simple Custom CSS: https://wordpress.org/plugins/simple-custom-css/. Go to Appearance > Custom CSS and insert:
/* Site Branding */ .site-header .site-branding-container { max-width: 28%; } /* Main Navigation */ .main-navigation { max-width: 72%; }
Given the menu items you have now, this adjustment allows just enough space for the menu to fit on one line.
Let me know how it goes.
May 26, 2015 at 6:02 pm #1630
rictansParticipantYes, I agree… this is what happened to my Ultra installation:
Increased the size of the Site Title… I think since it gets wider, it pushes onto the menu width. and one or more menu item gets bumped out of position. To fix this, I actually had to delete the menu and recreate another one.
Andrew, please have a look. BUT, I rather have you make modifications to the footer for me first, ie. boxed… please read a previous post from one or two post ago regarding the footer.
Thank you.May 26, 2015 at 7:06 pm #1636
Andrew MisplonKeymasterHi Ric
Thanks for your feedback.
It’s a bit of a balancing act with this layout to provide enough space for most site titles and enough space for a normal length menu. For anyone reading, if you do adjust the max-width of the site branding area and or menu, you need to adjust them both. Ideally they should add up to 100%.
I re-looked at these widths for the last update and provided extra responsive support. I think I’ve got it as balanced as possible. But will re-look at things again after the next update.
I responded to your other thread now regarding the footer/boxed. Thanks 🙂
May 26, 2015 at 9:12 pm #1642
KristenTParticipantHi Andrew
You were super quick, thanks a lot. I rearranged the menus and that solved the problem, thanks a lot. Also filed your answer, in case I run into the same problem again.
Cheers,
KristenMay 26, 2015 at 9:53 pm #1643
Andrew MisplonKeymasterSuper 🙂 Glad that helped.
If anything else comes up, please let me know.
All the best with your site.
June 25, 2015 at 4:02 pm #1704
Paris BaroParticipantHello Andrew,
Thanks for your theme. It’s useful and functional. I can do that I need and the result is excellent.
I only need center the main menu. I tried but I wasn’t successful. Would you mind how can I do it? Could you help me?
Thanks
June 25, 2015 at 6:02 pm #1705
Andrew MisplonKeymasterHi Paris
Great to have you with us. Thanks for your support 🙂
Are you looking to center the menu in the space between the logo and where the menu is now?
June 25, 2015 at 7:48 pm #1710
Paris BaroParticipantHi Andrew,
I would like to center the menu in the header. Now is on the right. I wish I explain it well.
Thanks you so much.
June 25, 2015 at 8:07 pm #1711
Andrew MisplonKeymasterThink I got it. Add the following to Appearance > Custom CSS if you’re using Simple Custom CSS plugin or Appearance > Edit CSS if you’re using Jetpack Custom CSS OR to your child theme style.css file. Remember not to edit any theme files directly via Appearance > Editor without a child theme as theme updates will overwrite any changes there.
/* Center the Main Menu */ .main-navigation:not(.toggled) { float: left; max-width: none; text-align: center; width: 91%; } @media screen and (min-width: 1024px) { .main-navigation:not(.toggled) > div { display: inline-block; float: none; vertical-align: top; } } @media screen and (min-width: 1024px) { .main-navigation:not(.toggled) .menu-search { display: inline-block; } }
Because it’s not a theme setting we need to create this manually. So two values that need observing are:
91%
, adjust that value until your menu and logo/title are on one line. Ideally adjust it until they drop onto two lines and then bring it one percentage back.1024
make this value the same as whatever you have at Appearance > Theme Settings > Navigation > Responsive Menu Collapse.Hope that helps.
June 25, 2015 at 8:33 pm #1712
Paris BaroParticipantThank you for your fast answer.
It is so useful. It is I need.
I installed Simple Custom CSS plugin that you recommend me.
I did some changes editing any theme files directly via Appearance > Editor without a child theme. I hope it will not affect in the futureThanks again.
June 25, 2015 at 10:04 pm #1713
Andrew MisplonKeymasterSuper, really glad that helped.
WordPress now have a warning at Appearance > Editor but it’s not nearly enough. All themes completely overwrite their own folder when updating from one version to the next. What you need to do now is move your changes.
1. Download the original: https://downloads.wordpress.org/theme/ultra.0.9.4.zip
2. Login to your server via FTP or hosting File Manager and download Ultra at /wp-content/themes/
3. Use DiffMerge to compare the files you edited with the original: https://sourcegear.com/diffmerge/.
4. In the case of style.css just move the individual rules that you edited over to Appearance > Custom CSS:/* This is a comment in CSS - use comments to add section titles so you know what your Custom CSS does */
5. If you’ve edited files other than style.css, let me know and I’ll explain what to do with those.
July 3, 2015 at 4:40 am #1842
kseniaParticipanthi
how can i remove the extra(about 50px) white space between header and home page?? i think its same issue i will have with extra unwanted space between “widgets”…… please reply, thanks by the way the site is: kseniasuhinova.comJuly 3, 2015 at 4:53 pm #1844
Andrew MisplonKeymasterHi 🙂
Just a quick repeat of what we discussed over email. If you use Meta Slider the slider should site directly under the menu. If not, and you’re placing a slider via Page Builder AND are using a Full Width, No Page Title page template you could then use the following at Appearance > Custom CSS to remove normal page padding:
/* Full Width No Page Title Templates */ .home.siteorigin-panels-home .site-content, .page-template-home-panels .site-content, .page-template-full-width-no-title .site-content > .container, .page-template-default-no-title .site-content > .container, .blog .site-content .container.no-blog-title { padding-top: 0; }
Appearance > Custom CSS is added by the plugin Simple Custom CSS and is safe place to store Custom CSS snippets. Remember not use Appearance > Editor as all WordPress themes completely overwrite during theme updates.
Hope that helps.
- AuthorPosts
You must be logged in to reply to this topic.