Note: The CSS classes may have changed depending on the Moodle theme or plugin, so you may need to find the correct ID or class to use this code correctly. Reach out if you need help.
Have you ever encountered that annoying issue in Moodle where long page names in the navigation bar start to overlap, making it difficult to read and navigate? It’s a common frustration, especially when using the Boost theme. But don’t worry, there’s a simple CSS fix that can put an end to this overlapping madness!
In this post, we’ll walk you through how to apply a small snippet of CSS to ensure your Moodle page names wrap neatly within their designated areas, preventing them from encroaching on the “Jump to” dropdown or other elements.
The Problem: Overlapping Page Names
Let’s illustrate the problem. Imagine you have a Moodle course using the default Boost theme. You create a page with a short name like “Test Page Number One.” This displays perfectly. However, when you add a page with a much longer name, such as “This is Page 3 with a Very Long Page Name,” you might notice that this long name starts to overlap the “Jump to” dropdown arrow at the bottom of the page. This is not only aesthetically unpleasing but also hinders usability.
The Solution: A Simple CSS Snippet
The key to fixing this lies in applying some basic CSS to the elements responsible for displaying the “Previous” and “Next” page links. These elements typically have IDs like previousactivitylink and nextactivitylink.
Important Note: While these IDs are common in the Boost theme, they might vary depending on the Moodle theme you are using. If you’re using a different theme, you may need to inspect the page’s code to identify the correct IDs for your previous and next activity links.
Here’s the CSS code we’ll be using:
#previousactivitylink, #nextactivitylink {
font-size: small;
white-space: pre-wrap;
text-align: left;
}Code language: CSS (css)Let’s break down what each property does:
- font-size: small;: This reduces the font size of the page names slightly, giving them more room.
- white-space: pre-wrap;: This is the crucial property! It tells the browser to preserve whitespace and wrap text as needed. Without this, the long page name would be treated as one continuous line, leading to the overlap.
- text-align: left;: This aligns the text to the left within its container.
How to Apply the CSS
To apply this CSS, you’ll need administrator access to your Moodle site. Follow these steps:
- Log in as an Administrator: Ensure you are logged into your Moodle site with administrator privileges.
- Navigate to Site Administration: Go to Site administration.
- Go to Appearance: In the Site administration menu, select Appearance.
- Select Your Theme: Find and click on your active theme (in our example, it’s “Boost”).
- Access Advanced Settings: Look for “Advanced settings” within your theme’s options.
- Locate Raw SCSS/Raw Initial SCSS: Within the advanced settings, you should find a text area labeled “Raw SCSS” or “Raw initial SCSS” (the exact name may vary slightly). This is where you can add your custom CSS.
- Paste the CSS Code: Copy the CSS snippet provided above and paste it into the “Raw SCSS” or “Raw initial SCSS” text area.
- Save Changes: Click on the “Save changes” button at the bottom of the page.
See the Magic Happen!
Now, go back to your Moodle course and navigate to a page with a long name. You should immediately see the difference! The long page names will now be smaller and will wrap neatly within their containers, preventing any unsightly overlapping with the “Jump to” dropdown.
You can even right-click and “Inspect” the elements to confirm that the font-size, white-space: pre-wrap;, and text-align: left; styles have been successfully applied. If you temporarily remove white-space: pre-wrap; in the inspector, you’ll see the text jump back to its overlapping state, highlighting just how effective this simple property is!
By implementing this quick CSS fix, you can significantly improve the user experience on your Moodle site, making navigation smoother and more visually appealing, even with lengthy page titles.
Do you have any other Moodle challenges you’d like to tackle? Feel free to leave a comment below or reach out!