I’m using the Icon stack and trying to have the uber menu stick completely to the top above my rev slider without any space. I wish to remove the other default headers as I am not needing to add social icons in the header. In addition I desire to have the logo added to the Uber menu. Here is a picture of what I’m trying to achieve versus what is happening when I logo out to test the page.
Hi,
Hello @fantasy_5,
Thanks for writing in!
1.) If you want to have the header as fixed, kindly check this out:
Just do not forget to remove the @media CSS to make sure that it applies to desktop screens.
2.) To remove the social icons, you will have to edit the menu and manually remove each social menu items. See the URL in the secure note below:
- see the secure note
Best Regards.
Hi, @ruenel
The menu you’re looking at currently in the photo is the Uber Menu. I want to keep the Uber Menu and the social icons that are added to it. I am trying to remove the default theme headers and make the uber menu stick to the top of my Rev slider like in the first photo example.
I used this css to max the container width. Without it the pages immediately go to a second row. I included other screenshots as better explanations.
.x-navbar-wrap .x-container.max {
width: 100%;
max-width: none;
}
Also the white logo banner area I’m trying to hide I guess and move the logo inside the Uber menu instead. I guess similar to this thread. I want a clean look where there is no white space area above and only the uber menu and rev slider visible above the fold. The css for mobile was added but did not do the trick as the menu is not displaying properly on desktop either.
Hello @fantasy_5,
Please take note of the following:
1.) You are using the X theme and Cornerstone plugin.
2.) When enabling the Ubermenu plugin, the default theme’s primary navigation will be replaced with the Ubermenu.
3.) Even if you are using the Ubermenu, you are still using the X theme’s default header. Only the primary navigation is replaced.
They easiest way for you to modify the default theme’s header is to upgrade to the Pro theme because it has the Header Builder which allows you to create a custom header that can display only the Ubermenu if you want to.
If you use the CSS and custom coding modifications, be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.
Thank you for your understanding.
Hi, @ruenel
Even without the CSS the menu is not sticking. When the CSS is removed the menu automatically goes to a second line. Why is that? What is the reason for the line of white space between rev slider and the uber menu? Can you please explain why? If the Uber menu automatically replaces the dfault menu why isn’t it functioning properly? Why do I need to buy Pro when I already own X? Since when did CSS support stop? I’ve been a paying member for years. CSS should not be needed to make it work properly. If it automatically replaces it why doesn’t it work out of the box?
Hello @fantasy_5,
I am seeing this:
The tiny white line is coming from the theme’s icon stack default styling. If you want to remove it, check out this old thread to change the bottom border of the navbar from white to transparent or none.
Best Regards.
Ok. I will check out the thread and let you know how it goes. As for the menu… I believe part of the issue is because of the themes default container. How do I remove the container in the header and menu area so the menu can be full width? How do I make pages that have been designed with cornerstone full width and flat when necessary? Is this is normal thing to have the hanging menu pictured in the first photo when using Uber Menu? What is the main reason it will not stick to the top when it is used rather than the default menu?
Hi @ruenel
I tried the CSS in the link you provided to remove the border and it didn’t do the trick. Are there any addtional suggestions that will solve the issue?
.site .x-navbar {
border: none !important;
}
hi, @ruenel
I know thw CSS to remove the logo navigation bars if necessary can be this
.x-logobar {display:none}
.x-logobar-inner {display:none}
However, it does not change the menu hanging. Can you assist me with figuring it out and explain why the menu won’t stick?
Hello @fantasy_5,
If you want a fixed navigation, go to Cornerstone > Theme Options > Headers and change Position of the Navbar.
Hope this helps.
Hi, @ruenel
Is the fixed top position the only way to prevent the menu from hanging ? Also, how do I remove the white space above the slider?
Hello @fantasy_5,
The "“Fixed Top” position will be applied to the whole site. If you only want it to apply in the homepage, you might want to check this:
To remove the white space, check this out (which was already added in my previous response):
Best Regards.
Hi, @ruenel
Regarding the code for the slider yes, you did include the code in the previous response, but as I mentioned previously it did not work. Are there any other suggestion? It looks like a thin line of white space on desktop, but is a much larger gap on mobile. When adding the custom code to fixed top for the home page only it removes the line, but does not solve the problem for the entire website. Also, the line appears to be removed on the home page only when logged in. How can I remove the white line site wide?
I believe part of the issue is because of the themes default container. How do I remove the container in the header and menu area so the menu can be full width? How do I make pages that have been designed with cornerstone full width and flat when necessary? Is this is normal thing to have the hanging menu pictured in the first photo when using Uber Menu? What is the main reason it will not stick to the top when it is used rather than the default menu? Is it possible that someone can login to better understand what I am experiencing?
Hey @fantasy_5,
You have this code:
body.x-navbar-fixed-top-active .x-navbar-wrap {
height: 90px;
}
The actual height of the Ubermenu is only 48 pixels. You should adjust your custom CSS as the remaining numbers contributes to the whitespace on smaller screens.
Best Regards.
Hi, @ruenel
I adjusted the code to zero and the issue only seems to be resolved on the homepage. There is still white space above and below the menu. There is also a huge gap of white space still on mobile. I am copying and pasting these questions again because I noticed I asked them several times and they are going unanswered.
When adding the custom code to fixed top for the home page only it removes the line, but does not solve the problem for the entire website. Also, the line appears to be removed on the home page only when logged in. How can I remove the white line site wide?
I believe part of the issue is because of the themes default container.
-
How do I remove the container in the header and menu area so the menu can be full width?
-
How do I make pages that have been designed with cornerstone full width and flat when necessary?
-
Is this is normal thing to have the hanging menu pictured in the first photo when using Uber Menu?
-
What is the main reason it will not stick to the top when it is used rather than the default menu?
-
Is it possible that someone can login to better understand what I am experiencing?
-
You also recommended in a previous reply about upgrading to pro will this be a free upgrade? I recall having to upgrade to pro for a different website because of issues I was having with X.
-
If I uninstall and reinstall the theme is there an option to use one of the demo designs for X?
Hey @fantasy_5,
You are using Icon stack and by default, there is a built-in CSS in the stack the adds a white border in the logobar and the navbar.
.x-navbar {
border-bottom: 1px solid rgba(0, 0, 0, .075);
background-color: #fff;
}
.x-logobar {
border-bottom: 1px solid #dfdfdf;
border-bottom: 1px solid rgba(0, 0, 0, .075);
background-color: #fff;
}
You may modify the code above to override the built-in CSS. Be advised that this is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.
1.) How do I remove the container in the header and menu area so the menu can be full width?
- It seems that you have resolve this already because the Ubermenu is already fullwidth.
- How do I make pages that have been designed with cornerstone full width and flat when necessary?
- Please use the “Blank - No Container | Header, Footer” page template. For more details about the page templates, please check this out: Page Settings | Themeco Docs
- Is this is normal thing to have the hanging menu pictured in the first photo when using Uber Menu?
- What is the main reason it will not stick to the top when it is used rather than the default menu?
- Please elaborate on this because this is already what I am seeing.
- Is it possible that someone can login to better understand what I am experiencing?
- Yes, we are logged in.
- You also recommended in a previous reply about upgrading to pro will this be a free upgrade? I recall having to upgrade to pro for a different website because of issues I was having with X.
- There was once a free upgrade offer in your dashboard. Regretfully, the offer have expired several years ago.
- If I uninstall and reinstall the theme is there an option to use one of the demo designs for X?
- Your other site “Shop at ***” is using the Pro theme. You can explore the Header and other builders in that install or to be safe, you can create a staging area for that site.
Best Regards.