.pageNavigation....Breadcrumb

kbarg · February 3, 2018 at 3:17 AM

None of the links are working on the breadcrumb or the "Mark Read" "RSS" etc links are not working either. What do I need to do?

I did modify the logo and made stuff bigger up top if that did anything...

Code

.pageHeaderLogo {
    text-align: center;
    height: 452px;
    margin: -18px;
}
.pageHeaderContainer {
    max-height: 450px;
    min-height: 5px;
}

.pageHeader {
    background-image: url("http://url.tld/image.jpg");
    background-repeat: repeat-x;
}

Display More

Black Rider · February 3, 2018 at 9:22 AM

Please show us a link to your forum where this problem occurs.

kbarg · February 3, 2018 at 4:08 PM

Please forgive my layout of the forums, if they look rough. I am testing a whole bunch of things. So sorry if it hurts your eyes.

http://de.zelda.community

kbarg · February 4, 2018 at 3:10 AM

Black Rider I bought your attachment earlier. It added a breadcrumb to the bottom of my forums.

It looks nice.

My top one is still broken though.

Black Rider · February 4, 2018 at 10:53 AM

Just remove line 3 from your code above and change line 4 to margin-top: -18px;.

And last but not least, add the following code:

CSS

@include screen-lg {
    .pageHeaderLogo > a {
        padding-bottom: 0;
    }
}

kbarg · February 4, 2018 at 2:15 PM

I did all of that, and I have some responsiveness on the right side, it seems like it is two pixels lower than the stuff

But I can't find the links on the left side.

Is there a way I could z-index: 1000; the breadcrumb and bring it to the top? By making it a more important layer? I know my image is cutting it close cause its huge....

kbarg · February 4, 2018 at 2:37 PM

I did do that:

CSS

.pageNavigation {
    z-index: 1000 !important;
}

And it brought my links on the left OVER the top of the logo

Now, My popup boxes on the right side "Collapse Sidebar", "Forums On / Off" etc, the popup dialog are behind the navigationBar.

I cannot catch the popup fast enough to Inspect it in Chrome.

Black Rider · February 4, 2018 at 3:17 PM

You didn’t do what I said you should do. At least not at the time I read your post #6 in this thread around 30 minutes ago. Before using something you did in your last post – which is horrible, in fact, and has many side issues, as you already noticed by yourself – please change your code from your first post to what I said in my last post.

If it doesn’t work then, I will take another look at your site. But please don’t change anything else.

kbarg · February 4, 2018 at 3:19 PM

Fixed. Sorry. What you suggested is in there now

kbarg · February 4, 2018 at 3:21 PM

Quote from kbarg

I did all of that, and I have some responsiveness on the right side, it seems like it is two pixels lower than the stuff

But I can't find the links on the left side.

Is there a way I could z-index: 1000; the breadcrumb and bring it to the top? By making it a more important layer? I know my image is cutting it close cause its huge....

This post was directed towards those modifications. That was before I added the Z-INDEX.

Black Rider · February 4, 2018 at 4:37 PM

Remove the margin-top: -18px; completely and add the following code:

CSS

.pageHeaderFacade > .layoutBoundary {
    padding: 0;
}

kbarg · February 4, 2018 at 4:52 PM

Links all work. The image is a little too high by a few pixels. The end of the hilt should be below that area.

I added "padding-bottom: 12px;" inside the .pageHeaderLogo like:

Code

.pageHeaderLogo {
    text-align: center;
    padding-top: 12px;
}

Was that alright? I can remove it if you need me too.

Black Rider · February 4, 2018 at 7:15 PM

Looks fine to me.

kbarg · February 4, 2018 at 7:16 PM

Thank you for all of your help. It is much appreciated.

I just had one more question. Is there a way to deactivate the link on the header background, and make it on the main image only and not the whole header area?

Black Rider · February 4, 2018 at 7:22 PM

You could do that with the following code:

CSS

.pageHeaderLogo > a {
    display: inline-block;
}

kbarg · February 4, 2018 at 7:23 PM

Thanks again. You are great.

kbarg · February 14, 2018 at 2:05 AM

Black Rider I just noticed right now, that the Top of the page Arrow is visible throughout the whole page, and the menu doesnt follow me down? Would that have something to do with those changes?

Kalyandevelopers · February 14, 2018 at 6:42 AM

A set of navigation links:

<nav>

<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> |

<a href="/jquery/">jQuery</a>

</nav>

Most browsers will display the <nav> element with the following default values:

nav {

display: block;

}

Keep checking your navigation :

Participate now!