[zettaininoParticipant]

The Superfly menu looks great.

But is it possible for it to create a setup similar to the sliding fixed menu used at https://www.danielhopwood.com
I’m only just able to display an off-canvas floating hamburger menu, without the full-length sidebar with a logo in the center.

Any help?

[RupokMember]

Hi there,

Thanks for writing in! You can use our integrated plugin Suprefly – https://community.theme.co/kb/integrated-plugins-superfly/

Hope it will do the job.

Cheers!

[zettaininoParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

I don’t see any SuperFly from your site and there is a jQUery error. Would you mind providing your login credentials as well? I’ll check what’s causing it.

Thanks!

[zettaininoParticipant]

For a while.. I was actually working on something.
Anyway, I revert it back.

Could you please check again?

[zettaininoParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Accordion to Superfly demos, the layout is achievable, see : http://superfly.looks-awesome.com/?demo=1
Please check its documentation here : https://community.theme.co/kb/integrated-plugins-superfly/

Hope it helps.

[zettaininoParticipant]

Just to be clear, I actually achieved your suggestion.
But what I really wanted is to imitate the navbar setup at https://www.danielhopwood.com
As you can see, my site only displays a small hamburger menu.
I would want it to be a full-length navbar.
And during on-click the rest of the navigation menu will appear (accordion-style).

Perhaps you can suggest a css style to create a full-length navbar instead of a small hamburger menu?
Could you help me on that? or any other suggestion?

[LelyModerator]

Hello There,

We can add this custom CSS on Appearance > Customize > Custom > Edit Global CSS:

#sfm-sidebar .sfm-sidebar-bg {
    background-color: #ffffff !important;
}
.superfly-on .sfm-rollback {
    background: #ffffff;
    width: 80px;
}
.sfm-navicon-button.sf_label_default {
    left: 10px !important;
}

The navbar will be full length. Unfortunately, the accordion style is only possible with customization that is out side the scope of our support. Thank you for understanding.

[zettaininoParticipant]

Ok. Thanks. This is great.

One more thing.
Could you also suggest a CSS style on how to place a logo at the center of the full length navbar?

[zettaininoParticipant]

I also noticed something.
The CSS you provided (#1397152) is placed on top of the fullscreen image.
I would prefer that the navbar be inserted such that it moves the fullscreen image to the right and not overlapping it.

Could you also help me on that?

[LelyModerator]

Hi There,

To add logo, try adding this script on Appearance > Customize > Custom > Edit Global JS:

jQuery(document).ready(function($) {
    $('<img src="http://ec2-54-218-24-252.us-west-2.compute.amazonaws.com/wp-content/uploads/2017/03/logo-icon-e1488768738609.png" alt="" style="top: 50%; position: absolute; left: 10px;">').insertAfter( ".sfm-navicon-button");
  
});

Fullscreen image is moving to the right when we activate the menu.
Please note that is the best way in regards to current setup. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[zettaininoParticipant]

Thank you very much on this.

So I applied your recommendation (#1397462). Looks great!

But I have an issue, on its responsiveness.
I would want to keep this look and feel only at a minimum width of 768px (Tablet).
And if the device’s width is less than 768px, the full length navbar is removed. keeping only the floating hamburger menu, and the logo will now be transferred to the top-center of the page.

Hoping you could help me on this too.

[zettaininoParticipant]

..

[LelyModerator]

Hi There,

Update this custom CSS:

#sfm-sidebar .sfm-sidebar-bg {
    background-color: #ffffff !important;
}
.superfly-on .sfm-rollback {
    background: #ffffff;
    width: 80px;
}
.sfm-navicon-button.sf_label_default {
    left: 10px !important;
}

To this:

@media (min-width: 768px){
#sfm-sidebar .sfm-sidebar-bg {
    background-color: #ffffff !important;
}
.superfly-on .sfm-rollback {
    background: #ffffff;
    width: 80px;
}
.sfm-navicon-button.sf_label_default {
    left: 10px !important;
}
}

Then add this too:

@media (max-width: 767px){
.sfm-navicon-button.sf_label_default+img {
    top: 17px !important;
    position: absolute !important;
    left: 50% !important;
}
}

Hope this helps.

[Author]

Posts