Header Alignment

This topic contains 13 replies, has 5 voices, and was last updated by  Andrew Misplon 2 years, 9 months ago.

  • Author
    Posts
  • #1628

    KristenT
    Participant

    Hiya
    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.
    Thanks

    #1629

    Andrew Misplon
    Keymaster

    Hi 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.

    #1630

    rictans
    Participant

    Yes, 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.

    #1636

    Andrew Misplon
    Keymaster

    Hi 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 🙂

    #1642

    KristenT
    Participant

    Hi 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,
    Kristen

    #1643

    Andrew Misplon
    Keymaster

    Super 🙂 Glad that helped.

    If anything else comes up, please let me know.

    All the best with your site.

    #1704

    Paris Baro
    Participant

    Hello 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

    #1705

    Andrew Misplon
    Keymaster

    Hi 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?

    #1710

    Paris Baro
    Participant

    Hi 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.

    #1711

    Andrew Misplon
    Keymaster

    Think 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.

    #1712

    Paris Baro
    Participant

    Thank 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 future

    Thanks again.

    #1713

    Andrew Misplon
    Keymaster

    Super, 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.

    #1842

    ksenia
    Participant

    hi
    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.com

    #1844

    Andrew Misplon
    Keymaster

    Hi 🙂

    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.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

Scroll to top