Moodle 2.6+ Theme - Moving the navbar

Moodle 2.6+ Theme - Moving the navbar

by Dave Emsley -
Number of replies: 11

Hi there,

I'd like to stay up to date with the way thinks work but I've got a bit lost on the theming.  I've copied "clean" and started a new theme as instructed.

I want the navbar within the page-header but it stubbornly refuses to move.  It seems fixed to me but I cannot find any css that controls this.

I've put borders on in the CSS to show what I mean as attached.  I want the green bordered navbar inside the blue bordered page-header.  I've looked at the layout files and tried adjusting this but I'm struggling.

 

As my theme has a parent of bootstrapbase I'm assuming any styles in mytheme/style/core.css override the bootstrapbase.  Is this correct?

 

Any advice greatly appreciated.

 

Cheers


Dave

Attachment temp.jpg
Average of ratings: -
In reply to Dave Emsley

Re: Moodle 2.6+ Theme - Moving the navbar

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Yes Dave, CSS that you add to your own file will override any from the parent.

Firebug is your friend here and will probably show that the navbar is still inheriting the position:fixed from bootstrapbase.

from memory I think what you need to add to your core.css is

.navbar {position:relative;}

but Im not at a computer with access to my own moodle sites at the moment to confirm that.

You may also need to add some additional css to position it where you do want it.

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Moodle 2.6+ Theme - Moving the navbar

by Dave Emsley -

That's exactly where it is Richard, many thanks.

Average of ratings: -
In reply to Dave Emsley

Re: Moodle 2.6+ Theme - Moving the navbar

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

Hi,

I am sorry to say but this is a little more complicated than just adding CSS, as you will need to physically change the layout file. See the attatched columns1.php which I have changed.

As you will see the <header id="page=header"> now contains the navbar header.

You would need to do this for all the layouts files as well as change the CSS.

Hope this helps?

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Moodle 2.6+ Theme - Moving the navbar

by Dave Emsley -

Thanks to Richard and Mary for confirming what I was thinking.

Getting there.... eventually wink

Average of ratings: -
In reply to Dave Emsley

Re: Moodle 2.6+ Theme - Moving the navbar

by Dave Emsley -

The key is overwriting ALL the values set in the parent theme, getting better at this wink

Average of ratings: -
In reply to Dave Emsley

Re: Moodle 2.6+ Theme - Moving the navbar

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

OK...your first mistake is making any changes to the parent theme.

If you want a theme to inherit layouts and styles or as you are finding that you need to change the layout files and the CSS then you do all this in YOUR child theme, and leave the parent theme intact. If this means adding customised layouts to the child theme, then that is how you do it. You would also need to add all the overriding CSS to accomodate the changes you are making to your custom theme's layout files.

Cheers

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Moodle 2.6+ Theme - Moving the navbar

by Dave Emsley -

Sorry Mary I worded that badly.  I'm using my child theme to overwrite the parent theme's CSS.  I haven't (and won't) touch the bootstrapbase theme that I'm using as the parent.

Cheers

 

Dave

Average of ratings: -
In reply to Dave Emsley

Re: Moodle 2.6+ Theme - Moving the navbar

by Dave Emsley -

The CSS is coming on nicely but I've "discovered" what I perceive as something odd - it could be me wink

For some reason the div with the id "page-navbar" appears differently in two column pages to three column pages. (See screenshot below).

The page code is identical in layout/columns3.php and columns2.php:

<div id="page-navbar" class="clearfix">
    <div class="breadcrumb-nav"><?php echo $OUTPUT->navbar(); ?></div>
    <nav class="breadcrumb-button"><?php echo $OUTPUT->page_heading_button();  ?></nav>
</div>

yet the output is different in the same browser. 

Any clues anyone?

Many Thanks

 

Dave

 

 

Attachment temp.jpg
Average of ratings: -
In reply to Dave Emsley

Re: Moodle 2.6+ Theme - Moving the navbar

by Sophia Barton-Bucknor -

Hi Dave,

I would also like to move the navbar. It seems that you have had some success with this. I am not new to Moodle but am new to CSS. I have cloned the clean theme and created a copy that works, however, I would prefer the navbar to appear below the banner/logo. Can you provide some guidance with this? Oh, I am on 2.5.

Sophia 

Average of ratings: -
In reply to Dave Emsley

Re: Moodle 2.6+ Theme - Moving the navbar

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Possibly overflow in the CSS?  Or a coding fault in the changes to the layout files?  An odd application of z-index?  Same browser indicates an implementation issue rather than a quirk.

Average of ratings: -
In reply to Dave Emsley

Re: Moodle 2.6+ Theme - Moving the navbar

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

Hi Dave, 

It is obvious to me what's happening here, but since you are meddling with the code I suggest you try and figure it out, unless you let us see the code you have changed whatever/wherever it is be it PHP, CSS, JavaScript or HTML5 as we are not mind readers or mystics...we are themes developers, we know how Moodle Themes work and what action to take if all else fails!

Cheers

Mary

Average of ratings: -