How to enlarge main menu block

Theming
1

Hi,
when resizing the site Engineering Department | Engineering Department to a smaller width the main menu is displayed in 2 lines and colliding with the landing page title. Since we are not displaying the site name next to the logo I would like to enlarge the main menu block and spread over that area too to avoid the splitting in 2 lines.
How can I achieve that?
Regards,
Catharina

2

Hey,
What can be done here is to uncheck the “has header ?” in the landing page so that your header is displayed at the top instead of appearing on the hero header component so as to avoid the colliding of it with the Tittle.

Since the menu has more links in your case when the site would be resized the menu will tend to appear in 2 lines and that is common for all using the CERN theme.

I hope this helps you.

Regards,
Prakhar

3

Hi,
thanks for your reply.
Un-ticking the “has header” has no impact.
I understand the concept of splitting in 2 lines, but there is still unused space next to the logo reserved for the site name which we don’t use and so I would like to know how to overwrite this.
Regards,
Cat

4

Hey,

That is something similar for all sites using CERN theme maybe you can make a few changes to the css to make the changes you require. You can do this by connecting to the server (webdev) of your site and apply the changes to theme.css over there but I am not sure if this will serve the purpose for you.

I hope changes to css in the theme may help you out here. Have a nice weekend.

Regards,
Prakhar

5

Hi,
yes, I know and that’s exactly what I would like to do, but I haven’t found the exact solution to this also since I don’t have access to the css of the original CERN theme.
So it would be great if you could help me out with that part.
Cheers,
Cat

6

Hey Cat,

If you want to make any changes in the CERN theme, you should use the CERN Override theme.

You can find instructions on how to do it here: Override the CERN theme | Drupal @ CERN

Have a nice day :slight_smile:

Regards,
Panagiotis.

7

Hi,
thanks, I have been using the override theme for years already.
I’d need some help on this specific question.
Cheers,
Cat

8

Hi,

After a quick check I did, I think that you can use something like that in the stylesheets.

@media (min-width: 768px){
   .site-info.col-sm-3 {
           width: 8.3333333333%;
   }
   .sticky-header .site-info.col-sm-3 {
           width: 25%;
   }
   .site-nav.col-sm-9.has-search {
   		width: 91.6666666667%;
   }
   .sticky-header .site-nav.col-sm-9.has-search {
   		width: 75%;
   }
}

It’s not the best, but it’s something easy that may fix the error you have.

However, if you decide to use it you should do several tests as I haven’t done any tests to check if your website will work properly.

If you want to check how the site will look like before you apply the change, you can use a browser, Google Chrome for example and then:

  • Right click → Inspect → Choose the Elements tab

  • Then press the + button on the right for Adding new style rule

  • Click on the inspector-stylesheet so as to move to the corresponding file

  • And finally copy paste the style I sent there

I hope that this will help you.

Feel free to write back to us if you need anything else.

Cheers,
Panagiotis.

9

Hi,
thanks!
I tested it on the corresponding test site and the following worked for me:

body header .site-info {
	width:8%;
	}
body header .header-wrapper {
  margin: auto;
  min-height: 70px;
  padding: 20px 0% 15px 5%;
}
.sticky-header .site-info.col-sm-3 {
width: 25%;
 }
.site-nav.col-sm-9.has-search {
width: 92%;
  }
 .sticky-header .site-nav.col-sm-9.has-search {
width: 75%;
 }

Cheers,
Cat

10

Hey,

Nice! Great job :smiley:

Have a nice day,
Panagiotis