Forcing line break in menu

Permalink Browser Info Environment
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
View Replies:
pilipala replied on at Permalink Reply
pilipala
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 at 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 at Permalink Reply
pilipala
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;

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 at Permalink Reply
OK, thank you. I will try that👍🏻

/Peter
pilipala replied on at Permalink Reply
pilipala
Great, thank you -

Jennifer
peel1962 replied on at 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 at Permalink Reply
pilipala
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

concrete5 Environment Information

# concrete5 Version
Core Version - 8.4.2
Version Installed - 8.4.2
Database Version - 20180716000000

# concrete5 Packages
Background Image and Overlay (0.9.9), GalleryES (2.5.9), HonestWebsites Simple testimonials (1.0.0), Seren (1.0.2), Touch Gallery 3 (3.2), Whale Grid Gallery (2.4.5)

# concrete5 Overrides
None

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
LiteSpeed

# Server API
litespeed

# PHP Version
5.6.36

# PHP Extensions
bcmath, bz2, calendar, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imap, intl, json, libxml, litespeed, mbstring, mcrypt, memcache, mhash, mysql, mysqli, mysqlnd, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, Reflection, session, shmop, SimpleXML, soap, sockets, SPL, sqlite3, standard, tokenizer, turbo_realpath, XCache, XCache Cacher, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend OPcache, zip, zlib

# PHP Settings
max_execution_time - 3000
log_errors_max_len - 1024
max_file_uploads - 100M
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 5000
memory_limit - 1024M
post_max_size - 100M
sql.safe_mode - Off
upload_max_filesize - 100M
memcache.max_failover_attempts - 20
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
RealPath safe mode - <i>no value</i>
realpath_cache_safe_mode - <i>no value</i>
xcache.var_maxttl - 0
opcache.max_accelerated_files - 4000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.1 Safari/605.1.15

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.