Monitor Reply

Support

Forcing line break in menu

Permalink Browser Info Environment November 22, 2018 at 9:00 AM

Hi. Is it possible to force the menu to break in two lines, or is it just automated to the total width?
/Peter

Type:	Pre-Sale
Status:	Resolved

pilipala replied on Nov 23, 2018 at 8:32 pm Permalink Reply

Hello,

Do you mean a two column submenu? This is not possible with the theme unless you customise it using CSS.

You could do this quite easily by adding custom CSS using columns.

https://developer.mozilla.org/en-US/docs/Web/CSS/columns...

div.ccm-page .dropdown-menu {
    columns: 2;
}

Or, you can float some items left and some items right, e.g. like below:

http://www.behemothdan.com/2011/05/faux-mega-menu-in-wordpress/...

Thanks,

Jennifer

peel1962 replied on Dec 3, 2018 at 9:44 am Permalink Reply 1 Attachment

Hi again. No I meant the top menu. And if it is possible to force that menu to always be two rows. See attached image.
/Peter

pilipala replied on Dec 4, 2018 at 10:56 am Permalink Reply

Hi,

This theme isn't designed to have two rows of links in the top menu, so it would require customisation. If you would like to view theme styles for the menu, you will find them here:

seren\themes\seren\css\build\topmenu.less

The theme uses bootstrap.css, so there are also Bootstrap styles applied to the menu. Please note that it is best to add your CSS changes to custom CSS in the design panel, rather than changing the LESS files in your Seren package, as then your changes won't be overwritten with future theme updates.

You could add CSS such as below to adjust the width of the menu to the desired width (you may need to adjust for different browser widths):

@media (min-width:767px) {
     div.ccm-page .navbar-nav {
         width: 80% !important;
         float: none !important;
       margin: 0 auto;
    }
}
 @media (min-width:992px) {
     div.ccm-page .navbar-nav {
         width: 60% !important;
    }    
 }
 @media (min-width: 1200px) {
     div.ccm-page .navbar-nav {
         width: 50% !important;

Viewing 15 lines of 17 lines. View entire code block.

 
  @media (min-width:767px) {
     div.ccm-page .navbar-nav {
         width: 80% !important;
         float: none !important;
       margin: 0 auto;
    }
}
 @media (min-width:992px) {
     div.ccm-page .navbar-nav {
         width: 60% !important;
    }    
 }
 
 @media (min-width: 1200px) {
     div.ccm-page .navbar-nav {
         width: 50% !important;
    }           
 }

If you need to modify the HTML of the top menu, you will find it in two locations:

seren\themes\seren\elements\header.php
seren\blocks\autonav\templates\seren\view.php

Thanks,

Jennifer

peel1962 replied on Dec 6, 2018 at 9:19 am Permalink Reply

OK, thank you. I will try that👍🏻

/Peter

pilipala replied on Dec 8, 2018 at 9:08 pm Permalink Reply

Great, thank you -

Jennifer

peel1962 replied on Dec 13, 2018 at 1:35 pm Permalink Reply

Hi again. It works pretty well with a few adjustments.
One other thing. If I want to use "letter-spacing" css on the menu. Where do I put the code?
Thanks again.
/Peter

pilipala replied on Dec 14, 2018 at 12:06 pm Permalink Reply

You can add it in "Custom CSS". Click on the cog icon in the concrete5 toolbar > "Design" > "Customise" > scroll down left menu to where it says "Custom CSS" and click on the cog icon > then add your CSS in the pop up box and click "save".

E.g.

div.ccm-page .navbar-nav > li > a {
  letter-spacing: 2px;
}

Thanks,
Jennifer

Seren

Support

Forcing line break in menu

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post