How to: use superflymenu & logo in Navbar (integrity)

Support
#1

Hi,

I have installed a superfly-menu and it works perfect. But I cant get my navbar right.

I want a horizontal navbar with ONLY my logo (stacked). And I want this always to be visible on top of every page (so a white horizontal bar with my logo centered).
My pagestructure is: No container, header, No footer
I DON"T want the menu underneath my logo. I don’t want the menubar. If I disable it as primary menu the template shows: ‘ASSIGN MENU’
I also had a code before and it worked. Now I changed my site frome Visual bakery to Cornerstone and I can’t see m to get it right ;-(


Maybe it is something really small but I can’t find it…

Thanks for your help.

#2

Hello There,

Thank you for the very detailed post information. I can see that you almost have the design you have wanted. To make sure that the menu will not be displayed, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

body.x-navbar-fixed-top-active .x-navbar-wrap {
    display: none;
}

Please let us know how it goes.

#3

Thank you.
It is a clean solution again but there is still something I really would like to have.

Now it shows my logo centered (stacked) on top of my page. Perfect. But when I scroll down it disappears so… it is not FIXED. Or means fixed something else because I would like my logo to stay visible while the reste of the page scrolls…

I hope this can be done.
Thank you in advance :slightly_smiling_face:

#4

Hi there,

Actually, the Sticky functionality is related to the Navbar and not the Logobar. So the correct way to have that fixed view is to go another way around and add the logo to the navbar.

I added the Javascript code below to X > Launch > Options > JS:

jQuery('.x-logobar .x-container').appendTo(jQuery('.x-navbar .x-navbar-inner'));

And the CSS code below to X > Launch > Options > CSS:

.x-navbar-inner .x-container:first-child,
.x-logobar {
    display: none;
}

.x-navbar-inner .x-container:last-child {
    text-align: center;
    padding: 30px 0;
}

Now if you check your website it is working as expected. Please kindly consider that this is a customization and is outside of our support scope. So for any reason, it breaks in future due to an update to the theme or changing of the structure in the future we will not be able to maintain the given code.

Such customization suggestions are for you to be able to get what you want regarding the view of the website but if you want a further in depth customization you will need to hire a developer.

Thank you for your understanding.

#5

WOW!!!

Thank you.

#6

Please do not kill me but there is a change in plans due to the fact that I want it on mobile the same as on desktop.
This means I want it like it is now… BUT NOT STICKY.
Why? because I want people to see my logo only in the beginning. Afterwards it is also shown in the superfly menu.

But if I delete your JS code and the text in CSS in Launch > option it will show me again the line under the logo which says ‘assign’ a menu. I don’t want to see this text and in the instructions of Themepunch it is so simple as deleting the boxes but that doesnt work…
What to do?

#7

Hi there,

To achieve, that you will have to remove the JS and the CSS codes previously suggested. Then set the Navbar Position in Header > Navbar to Static Top then add this code in the CSS:

.x-navbar-wrap {
    display: none;
}

Hope this helps.