Superfly Menu remove Site Title and Tagline space

Support
#1

Hi guys,

A couple of questions:
1.Is there a way to remove the site title and tagline empty space under the image and the menu items?
2. When the menu is set to sidebar, the essential grid doesn’t recognize it as the “border” of the page and goes under. Any ideas how to fix that?

link: https://petardopchev.com/work
screengrab: https://prnt.sc/ifoo8e

Thank you,
Petar

#2

Hi there,

  • To reduce the top spacing, please add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS 
.sfm-nav > div {
    vertical-align: top !important;
}
nav.sfm-nav {
    border-spacing: 0 150px;
}
  • To fix essential grid, make use of the following code:
.esg-container-fullscreen-forcer {
    left: auto !important;
    width: 100% !important;
}

Let us know how this goes!

1 Like
Superfly and Essential Grid Issue
#3

Thank you guys, works great!

#4

Glad that we could be of a help :slight_smile:

#5

Hi guys,

Just noticed another issue - all the landscape oriented images are missing the left arrow for navigation: https://prnt.sc/ih25bw Would that be because of the superfly menu? The issue is not present with vertical images…

Regards,
Petar

p.s. this is the new account, which is a replacement for wcshutter.

#6

Hi there,

The problem is the Z Index property of the menu which goes over the lightbox. You can get around that by adding the CSS code below to X > Launch > Options > CSS:

#sfm-sidebar {
    z-index: 1000;
}

Thank you.

2 Likes
#7

Thank you, that did the trick!

One more issue with essential grid on that page: it looks like the grid on mobile works only when you tap twice on an image… Any idea what is causing that behavior?

Thank you,
Petar

#8

Hi there,

What device you’re testing it with? I checked and I can trigger the lightbox in single touch on the image. Is it the overview page? Just in case I checked the wrong page.

Thanks!

#9

Checking on iPhone 6s - both Chrome and Safari with cleared cache -> still the same, it works with two clicks…

#10

Hi there,

I’m able to reproduce it on iPad, older IOS. Editing the skin and changing the Link/SEO > Add Link To to Media fixed it. Could you try testing it again?

Thanks!

#11

Thank you for the prompt reply! I seems like it works “randomly” on mobile - sometimes it doesn’t open the image, and makes the grid “not clickable” on desktop…

#12

Hi there,

I checked the Essential Grid comments section in the Themeforest and I have found this answer from the developers:

Hello,
as you noticed, this depends on wether you have a “show on hover” button or not.
If you want the button to always register the click with one tap, you need to make it always visible right now.

So I guess you will need to use the Hide Based on the Breakpoint feature of the theme to add another version of Essential Grid for mobile devices that shows the button all the time.

Thank you.

1 Like
#13

Thank you, really appreciate it!

#14

Glad that we could be of a help :slight_smile:

1 Like
#15

Hi guys,

One more question about SuperFly Menu -> trying to reduce the space above the logo so it moves up: https://prnt.sc/ijzprj with the following css, but it doesn’t seem to be working once it is applied although it works in the “browser inspector”

/* Adjust Logo Position */
.sfm-sidebar-always #sfm-sidebar .sfm-logo, .sfm-sidebar-always #sfm-sidebar.sfm-compact .sfm-logo {
    margin-top: 10px;
}
.sfm-toggle-hover #sfm-sidebar .sfm-logo {
    margin-top: 10px;
}

#sfm-sidebar.sfm-compact .sfm-logo {
   margin-top: 10px;
   margin-bottom: 15px;
}

Any ideas on how to fix that?
Thank you!

p.s. how do I paste code here properly? Tried the preformatted text, but it is not working - it seems like the # sign breaks it…

#16

Hi there,

You can add your codes in between two ``` and it will be formatted as code.

As for the issue, please try adding !important, like this

.sfm-sidebar-always #sfm-sidebar .sfm-logo, .sfm-sidebar-always #sfm-sidebar.sfm-compact .sfm-logo {
    margin-top: 10px  !important;
}
.sfm-toggle-hover #sfm-sidebar .sfm-logo {
    margin-top: 10px  !important;
}

#sfm-sidebar.sfm-compact .sfm-logo {
   margin-top: 10px  !important;
   margin-bottom: 15px !important;
}

Thanks!

#17

Hi, actually doesn’t work - it is implemented in X > Launch > Options > CSS at the moment. It’s kinda weird because when you make those changes in the browser inspector they take affect, but not when you input the actual CSS code…

#18

Hi there,

In that case, please try adding it in your child theme’s style.css, there could be the conflicting structure that breaks the CSS format from the header. Plus, there is no cache being served either.

Thanks!

#19

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