Title bar will line break with more than 4 -5 titles

[rbrackma]

Hi,

I set up a website based on your framework and I am very satisfied : https://github.com/rbrackma/abc/blob/gh-pages/_config.yml I realized that when adding more than 4 or 5 titles, the title bar will line break to two lines (as you can see on the rendered page : rbrackma.github.io/abc ). Do you have a hint from where this behavior is coming ? Behavior when I resize the screen to smaller :

• first the title bar reajusts from 2 lines to 1 line, great (but I does understand this)
• second the line bar disappears (normal, saw that in the code)

I tried for many hours to debug, but my Javascript knowledge wasn't sufficient. Maybe you have a hint Thanks Roland

[mmistakes]

Looks to me some of the layout broke when you customized the masthead menu.

The default is for a site title to float to the left and the menu to float to the right. If you inspect the elements using your web browser's web dev tools you'll see the CSS being applied.

Depending on your screen size the declarations adjust. On large screens for example .top-menu has a width of 57.35098%. That's why on your site it's dropping to 2 lines. You have more menu items than can fit so it knocks to a second line. You also have some screwy stuff going on with floats you'll probably have to play with.

If you give .top-menu a width of 100% and remove position: absolute and right: 0 from .top-menu ul you should be able to get the menu to fit better.

These are just some quick edits. You'll need to dig deeper into your customized CSS to get the layout you're after.

[rbrackma]

Thanks for the quick response and you hints, it allowed me to have the second line to be not inside the picture any longer. In addition to it I had to tweak the grid settings though as the line break still occured on screens bigger than 1200px --> found a workaround by setting large to 3000 (works for me) : https://github.com/rbrackma/abc/blob/gh-pages/_sass/_grid-settings.scss#L14-L17

// NBM From 1000 pixels on, the top-menu disappears (need around 1000 pixels to display all titles) 
$medium: new-breakpoint(min-width em(1000) 12);
// Somehow when reaching the large limit the top-menu line breaks... , so putting a very large value that is never reached
$large: new-breakpoint(min-width em(3000) 12);

Could you point me to the code switch from large to medium screen (or medium to small) I do not get to the logic/ understand where I need to intervene.

You might have an idea for this additional resizing problem linked to medium / large ... I have added a image here for every tab: https://github.com/rbrackma/abc/blob/gh-pages/_sass/_layout.scss#L234

With a screen of more than 1000px (limit set in grid settings)

With a screen of less that 1000px, the image gets messed up. My goal : not to display the picture for small screens.

Thankful for any idea. Roland

[mmistakes]

What's going on with the .page-lead image is its assigned via inline CSS as a background-image. What happens when done that was is it only occupies the space of it's parent container (no more/no less).

<div class="page-lead" style="background-image:url(//www.brackmann.fr/images/brackmann-entreprises-1920x850.jpg)">
  <div class="wrap page-lead-content"></div><!-- /.page-lead-content -->
</div>

In your example above there technically is no content inside but because .page-lead-content has padding assigned to it, it takes up some space and that is why you see part of the image still.

What you could do is hide the entire .page-lead container with display: none and then flip it back to block on larger screens to show it.

.page-lead {
+  display: none;   
   background-position: center top;
   background-repeat: no-repeat;
   background-attachment: fixed;
   text-align: center;
   color: $white;
+  @include media($medium) {
+    display: block;
+  }
   @include media($large) {
     background-size: cover;
   }
}

The theme's CSS follows the mobile first philosophy, meaning mobile styles come first with larger screen styles after.

The @include media stuff is a mixin (shortcut) for declaring media-queries for apply styles to specific breakpoints. $medium, $large, etc are Sass variables that you can find in _sass/_grid-settings.scss

// Define your breakpoints
$short: new-breakpoint(max-height em(700) 12);
$micro: new-breakpoint(min-width em(240) max-width em(480) 12);
$small: new-breakpoint(min-width em(600) 12);
$medium: new-breakpoint(min-width em(900) 12);
$large: new-breakpoint(min-width em(1280) 12);

[rbrackma]

Hi, thanks again. Your little example helped me understand how to create the if then else cases and was exactly what I needed. Keep up the good work Roland