Breadcrumb hidden behind menu

Support
#1

http://gourleymusic.com.au/piano-tuning/

the breadcrumb hides behind the menu and moves down when I go into editor so it looks right but it is behind the menu when I go out of admin panel

#2

Hi, wicara,

The problem is that you did a customization of the theme which caused the issue. Please remove and custom CSS or Javascript code you added and change the Child Theme to Parent theme and test the case.

You will see that the breadcrumbs are in a correct place.

As a temporary solution you can add the CSS code below to Pro > Theme Options > CSS but it will not be the correct approach and you need to check your customization and cause of the issue:

.x-breadcrumb-wrap {
    margin-top: 33px;
}

Not related to the question but it is recommended that you backup your website completely and update the theme to version 2.1.5.

Thank you.

#3

just so I am sure on the best way of doing this this site needs a fixed topbar I did this with the following code

.masthead.masthead-inline {
position: fixed;
z-index: 999;
width: 100%;
top: 0px;
background: transparent;
}
which means I had to increase the margin
body .x-slider-container.below,
body:not(.home) .site {
border: none;
padding-top: 10.5%;
}

have I done this the hard way, is there a better way to achieve this ?

#4

Hello There,

Since you have made the custom css, just update it and use this instead:

.masthead.masthead-inline {
    position: fixed;
    z-index: 999;
    width: 100%;
    top: 0px;
    background: transparent;
}

body .x-slider-container.below,
body:not(.home) .site {
    border: none; 
    padding-top: 156px;
}

156px is the actual height of your masthead. If you are logged in, you might need to add 32px making it 188px. And this custom css might help as well:

body.logged-in:not(.home) .site {
    border: none; 
    padding-top: 188px;
}

We would loved to know if this has work for you. Thank you.

1 Like
#5

you dont happen to know the heights for mobile and small screen do you ?

#6

Hi wicara,

You need to use the Google Chrome Developer toolbar to select the masthead section in smaller view and detect the height of the element.

Please follow the tutorials below to get more information and know how to use the tool:

https://www.youtube.com/watch?v=wcFnnxfA70g

I also did a Google Search which will help you on your research.

Thank you.

1 Like
#7

how would I push all the content down add a margin to the topbar ?

#8

Hi There,

Please also try adding this custom CSS:

@media (max-width: 480px){
    body .x-slider-container.below, 
    body:not(.home) .site {
        padding-top: 154px;
    }
    .x-breadcrumbs {
        margin-left: 60px;
    }
}

Let us know how it goes!

#9

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