Docs

[jensmith3]

Hello,

My site is on the temporary url of http://103.37.8.129/~thekidsa/

I have a full width image in the header and I have reduced the height of the header by adding a max-height (see below).

Now though my navigation falls below the header and I can’t find where to adjust this. Also I have selected Fixed Top for the header but it scrolls with you down the page rather than staying put.

Would really appreciate your help.

Kind regards,

Jenny

header.masthead {
background-image: url(“http://103.37.8.129/~thekidsa/wp- content/uploads/2016/08/TKAbannerNoText.jpg”);
width: 100%;
max-width: 100%;
max-height: 200px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding-top: 30px;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
min-height: 200px;
}

[jensmith3]

This reply has been marked as private.

[Friech]

Hi Jenny,

Thanks for writing in! You can set your navbar position to Static Top instead, so it does not scroll with the page.

To overlay the menu on the image, add this under Custom > CSS in the Customizer.

.ubermenu-main {margin-top: 0;}

Hope it helps, Cheers!

[jensmith3]

Hello,

Thanks for that. I’ve done both but no change. Is there something else I can try?

Kind regards,

Jenny

[Rupok]

Hi Jenny,

It seems you have added the below code instead :

.ubermenu-main {
  margin-top: 100px;
}

Kindly use the suggested code.

For your current customzation; you should make the header fixed to get expected result. You can use this :

header.masthead {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
}

.x-main.full {
  margin-top: 200px;
}

Hope this helps.

[jensmith3]

Hi there,

Something not quite right and I’m confused.

Under customisation > Header > Fixed

Then I added this to my child theme:

.ubermenu-main {margin-top: 0;}

Next I removed this from my child theme:

.ubermenu-main {margin-top: 0;}

And added this as well:

header.masthead {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 999;
}

.x-main.full {
margin-top: 200px;
}
The nav bar still falls off the header banner and the banner disappears when you scroll or hover over it.

Please help.

Many thanks and kind regards,

Jenny

[Christopher]

Hey there,

Thanks for writing in! 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 principal 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!

[jensmith3]

Hello again,

Thanks for your reply. I’m lost.

This site does not have a logo, it has a full-width image in the header and uses the site title and tag line.

I have temporarily removed one top-level navigation item to see if that made a difference. It didn’t. I only have four to start with – About | Services | Contact | 0000 000 000. I have also reduced the font size of the navigation items but no luck there either. I then removed the more recent advice re css and returned to my original css as at the top of this post.

What I am left with now is a banner that disappears when I scroll, navigation that I can’t seem to adjust to sit on the banner and that continues to be visible when you scroll down the page instead of being fixed at the top.

I am obviously testing your patience but at this stage I do not know what to do. The X-Theme is the only theme I use and while I appreciate I am a novice, focusing on just one (excellent) theme means I stand a greater chance of mastering some of these more intricate challenges.

With thanks,

Jenny

[Joao]

Hi Jenny,

Since you are adding your styling to your style.css would you mind providing your FTP credentials in a private reply?

Thanks

joao

[jensmith3]

This reply has been marked as private.

[jensmith3]

Hello again,

I have managed to get the banner looking right but the navbar as well as the site title and tag line don’t stay put but are visible as you scroll down the page.

I know I’m missing something – any help much appreciated.

Kind regards,

Jenny

[jensmith3]

This reply has been marked as private.

[Friech]

Hi Jenny,

Yup the issue is, seems to be the site does not respect the customizer settings. On the Customizer the Navbar Position is set to static top. But on the front-end we can still see the page having this class x-navbar-fixed-top-active which is the class for fixed-top.

Would you mind deactivating all your plugins, and try to save the customizer settings. If your changes take effect, you’ll know a plugin is causing the issue. You can then activate it one by one to identify which plugin is that.

Let us know how it goes.

Cheers!

[jensmith3]

Hi there,

I just deactivated all plug-ins but it didn’t make a difference. I have reactivated only those I am currently using.

Thoughts?

Kind regards,

Jenny

[jensmith3]

Hi,

Just to confirm, I deactivated all plug-ins, saved the customiser settings then reloaded the page. Still the same so a reactivated only those plug-ins I am currently using.

Thanks,

Jenny

[Author]

Posts