How to hide sections in the phone layout

Support
#1

Hi,

I want to hide some sections from ms website for the phone platform as otherwise it looks weird but I do not know how to do it. Could you help me, please?

Thank you,
Marina.

#2

Hi Marina,

Thanks for reaching out.

You could try using the Hide during breakpoint feature, please check this for further information. https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Thanks!

#3

Thank you!
Another question, right now when I go to my website through the phone it appears this blue line below my photo in the page -work with me, which I would like to delete.

Also when I go the menu the background appears in blue, but I would like it like this:

What can I do to do this changes?

Thanks,
Marina.

#4

Hello Marina,

Thanks for updating the thread. :slight_smile:

Please add following CSS under Pro > Theme Options > CSS:

.x-navbar .x-nav-wrap .x-nav > li > a {
    border: none;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}

.x-btn-navbar, .x-btn-navbar:hover {
    color: #ddd;
}

.x-nav-wrap.mobile {
    background-color: #c5c5c5;
    margin-top: 30px;
}


.x-navbar-wrap {
    background-color: #c5c5c5;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#5

Hi,

Thank you for that but what I actually wanted it is that when the people click in menu it does appear only the menu and not the background photo and neither the text below. Just the menu as in this example:

I write you below one example of website that has that:

How can I make that?

Thanks,
Marina.

#6

Hi Marina,

This is easily achievable with the Pro header using the Navigation Modal element. As for X, it will involve some more custom CSS which we cannot provide due to the amount of code required to make the default X mobile menu display and function like this. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

#7

Well, I do not have a consult developer to ask. Couldn’t you tell me the coding or some page where I could check this?
It would be really helpful. I do have the Pro, but it does not work well for me and that’s why I am using the X.

Thanks,
Marina.

#8

Hello Marina,

We do not have any snippets or codes that might help you. All we can recommend is that you can use the Navigation Modal element or the Content Modal element in Pro since it is almost exactly the same. Since you are using X theme, you might need a 3rd party plugin like the SuperFly Menu. You can install it from X > Validation > Extensions. If you want to know more about SuperFly, you can check it here:

Hope this helps

#10

Thank you so much, it worked!
Could you help me with few last things:

-How can I delete the other menu that appears, the default one?
-How can I make the menu button appears in the centre below the image?
-How can I make disappear the shadow that appears when you go the menu and try to click in About for example? I would like to instead of that make the letter change.

Thank you,
Marina.

#11

Hello Marina,

Thanks for updating in!

1.) To get rid of the default mobile menu, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

#x-btn-navbar{
    display: none;
}

2.) You will have to adjust with custom css. Please add back the superfly menu so we can give you a more detailed response on this.

3.) Place the Superfly menu first because we do not have an idea of how or where the shadow came from.

Thank you in advance.

#13

Hello Marina,

You can utilize the custom menu triggers to display Superfly menu.
Please check this out:

If nothing is helping, please provide us access to your site so we can help you set it up.

Best Regards.

#14

Hi,
I have write above in private note the info of my account.
I write you below the changes I would like to do and I cannot find way to make them:

-Make disappear the shadow that appears when you go the menu and try to click in About for example? I would like to instead of that make the letter change.
-Delete the blue line that appears below the header’s photos.
-Centre the menu, as at the moment the letters home has a too big margin on the top and newsletter doesn’t have any margin on the bottom.
-Put the menu button in the bottom of the header, in the centre.
-Delete the curtain effect that appears when you click in menu.

Thank you so much in advance,
Marina.

#15

Hi Marina,

Please add this custom CSS:

#sfm-sidebar.sfm-hl-line .sfm-menu li>a:focus {
    background: transparent;
}

Look for this custom CSS:

@media (max-width: 979px) {
  .masthead {
    position: relative;
    width: auto;
    background-color: #001937;
  }
}

Remove the background property.

That space is intended for logo.

Adjust it on the BUTTON TAB here:

Unfortunately, I am not exactly sure which curtain effect you are referring too.

#16

Hi,

Unfortunately, it haven’t work.
It keeps appearing the shadow that appears when you go the menu and try to click in About for example. And, a blue line that appears below the header’s photos. Could you tell advise what to do?

I attach you below photos of screenshots of both things:

And, last thing, I cannot find where should I click to reduce the top margin on the page I show you below:

Thanks in advance,
Marina.

#17

Hey Marina,

Here’s the full code to remove:

  1. the shadow or technically the hover and focus background
  2. remove the padding of the logo area
#sfm-sidebar.sfm-hl-line .sfm-menu li.sfm-submenu-visible>a, #sfm-sidebar.sfm-hl-line .sfm-menu li:hover>a, #sfm-sidebar.sfm-hl-line .sfm-menu li>a:focus {
    background: transparent;
}

.sfm-style-full #sfm-sidebar .sfm-logo {
    padding: 0;
}

Custom or override CSS for Superfly should be placed in the Additional CSS area under the Advanced tab.

The code should work (as you will see in the screencasts below) provided:

  1. you have copied the code completely
  2. there are no other CSS that is overriding the said areas
  3. and there are no syntax errors anywhere in your site.


Please note that we do not provide customization service as part of our product support. We can point you to the needed selectors but you’ll need to code the rest of the CSS properties on your own or with help from a developer.

If you have other questions, please open a separate thread as mixing topics in a single thread often becomes confusing and that results in frustration both for the customer and support staff.

Thanks.

#18

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