Header inline issues

[secretmoviegeek]

Hi there,

I’m using X (not Pro) and have been trying to horizontally align the website logo, navigation links and search icon within the header.

I tried to use the settings within a homepage I created, but when this didn’t work I downloaded a demo site (knowingly losing my theme settings) and tried to amend that but it still isn’t aligning the elements.

The navigation links sit centred and slightly below the logo, and the search icon sits centred below that and I can’t change it.

Please can you advise?

[nabeel]

Hi Jason,

Thank you for reaching out to us. I tried to check your site but It’s behind the coming soon page. However your particular situation sounds like a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principle applied to filling up a room with furniture – there is only so much that can fit into a given space. The following should be considered in these situations:

• Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.
• Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.
• Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.
• Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.
• Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible to save on a little real estate.

Let us know how this goes!

[secretmoviegeek]

Hi Nabeel,

Thanks for getting back to me.

Apologies - I’ve removed the coming soon page temporarily for you to have a look.

In response to your recommendations:

• Logo Size - I’ve tried reducing the logo size to the point where it is barely readable.
• Shorter Names / Rearrange / Less Links - there are currently only 3 links in the top-level navigation.
• Appearance - I have also made an effort to reduce the font size, spacing, etc of the links to ensure all the fit.

I may be missing something so once you’ve had a look please let me know if there’s anything else I can try.

Thanks

[Prasant]

Hello Jason,

Thanks for asking.

Please add following CSS under X > Theme Options > CSS:

@media only screen and (min-width: 900px) {
  .ubermenu-main {
    width: 100%;
    padding-top: 25px;
}

.x-container.max.width {
    display: flex;
}

li.menu-item.x-menu-item.x-menu-item-search {
    float: right;
    margin-top: 30px;
}
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[secretmoviegeek]

Hi @Prasant,

Thanks for your reply.

This has done the trick.

Thanks for your help, much appreciated!

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!