Change position of the breadcrumbs bar

Change position of the breadcrumbs bar

by Wayne Foster -
Number of replies: 5

Hi, I'm using Moodle 2.3.2 and I'm modifying the Standard theme. I successfully installed our school web banner into the header of the theme clone. I wanted to maintain the size of the banner so that it looks like the school webpage. The banner jpg height was too large so I modified the height of the header area so that all of the banner could be seen. However, this has led to a problem where the 'breadcrumb bar' (not too sure of the correct name to use) is positioned almost half way across the header banner. How can I change the position of the 'breadcrumb bar' so that it appears below the header area?


Thanks, Wayne.

Average of ratings: -
In reply to Wayne Foster

Re: Change position of the breadcrumbs bar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi, this is a problem with the way Base theme is designed. In my opinion it is wrong. However, what you have done so far is correct, what you need to do now is make the header deep enough to accomodate the navbar (breadcrumb) I think you may need at least 35px more.Assuming the banner height is 150px then #page-header needs hight to be 150px + 35px = 185px

#page-header { height: 185px;}

Then you need to add a new rule to #navbar in the CSS, something like...

#navbar { position: relative; top: 150px; left: 10px; }

The top and left values may need changing to suite your Moodle site.

I think this will fix it if not get back to me again!

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Change position of the breadcrumbs bar

by Wayne Foster -

Hello Mary, Thanks for the quick reply. I copied and pasted the #navbar code you suggested into the core.css Override Base section but the bar didn't move. Am I pasting it into the right place?

Average of ratings: -
In reply to Wayne Foster

Re: Change position of the breadcrumbs bar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Sorry I made a mistake... it should be .navbar NOT #navbar it is a CLASS not an ID so it needs a 'dot' not a 'hash #' infront. blush

Average of ratings: -