Logo in line with navbar and links, etc

Support
#1

I’m sorry but i have tried everything I know and read support posts. Cannot figure out how to get the logo inline with the navvbar.

  1. I want navbar full width with some space on left and right margins
  2. logo aligned left (small space to left)
  3. navbar aligned right (with small space to right

Jane

#2

Hello Jane,

Thanks for asking. :slight_smile:

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

.x-brand {
    margin-top: 30px;
}

.masthead-inline .desktop .x-nav {
    margin-top: 35px;
    width: 72%;
}

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.

#3

tried css code provided. added a bottom margin of same px.
the logo is still above the navbar. can’t figure this one out.

new credentials to follow

.x-brand {
margin-top: 30px;
}

.masthead-inline .desktop .x-nav {
margin-top: 35px;
width: 72%;
}

#4

Hi Jane,

Your logo and nav items doesn’t fit the allowed space.

This particular situation is simply 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.

Thanks

#5

I don’t think you are understanding the issue or I am not explaining it accurately.

  1. Why did the first response provide css?
  2. See attached screen shot #1. I removed the logo and the issue remains.
  3. See attached screen shot #2. I substituted a very small logo and the issue remains.

has nothing to do with the font size in navbar. I have been playing around with the settings for days and no change.

Thanks in advance.
Jane

#6

Hi Jane,

Please navigate to Theme Options > Header > LOGO AND NAVIGATION > LAYOUT > select Inline:

After that add this custom CSS under Theme Options > CSS:

.x-navbar .x-container.max.width {
    width: 98%;
    max-width: 100%;
}

Hope it helps :slight_smile:

#7

Thanks so much.

  1. The header layout was already selected to “Inline” Layout, but thank you. See attachment 1.

  2. I added the custom CSS under Theme Options which did the trick regarding the full-width navbar. Thanks! See attachment 2.

  3. My original goal was to get the logo and the navbar on the same line. I don’t care if it’s to the left (or preferably in the center), but i want the navbar links and logo all lined up. See attachment 3. Can’t figure this out on any of my sites with xtheme.

Thanks in advance

#8

Hi Jane,

Sorry for all the confusions, the custom CSS provided was for the standard X menu. But since you’re using UberMenu for your navigation, please follow this UberMenu documentation on how to add logo/image on the menu.

Hope it helps,
Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.