Navigation background in minimized mode

Permalink Browser Info Environment
Hi.
I´m using black bg for the header navigation with a white font color. But when i goes in minimized mode (for smartphones etc.) the menu loses its background color and goes white.
So, there I am with a white font on a white bg. (See attached images)
Is there a way to change these settings? Couldn´t see it in the design-area.
/Peter

2 Attachments

Type: Discussion
Status: Resolved
peel1962
View Replies:
corywebb replied on at Permalink Reply
corywebb
Can you post a link to your site so I can test it to see exactly what's happening?
peel1962 replied on at Permalink Reply
peel1962
Here is the link.
http://www.cauco.se/v2/
/Peter
corywebb replied on at Permalink Reply
corywebb
Also, the solution is probably going to be to add a media query in the custom CSS area. I'll need to test it to be sure, though.
corywebb replied on at Permalink Reply
corywebb
Sorry for the delay in getting back to you. You'll need to go to the design customizer and scroll down to the bottom to add custom CSS. Here is the CSS you'll need to add:

@media (max-width: 767px) {
  .ccm-page nav.navbar .navbar-nav {
    background-color: #272526;
  }
}
peel1962 replied on at Permalink Reply
peel1962
Thanks a lot!! Works fine in the top level menu, but the rollover in subnav is still white bg with a light color font. Can you help me with that also would be nice?
/Peter
corywebb replied on at Permalink Reply
corywebb
Sure, replace what I posted earlier with this:

@media (max-width: 767px) {
  .ccm-page nav.navbar .navbar-nav, .ccm-page nav.navbar .navbar-nav > li > ul > li > a:hover, .ccm-page nav.navbar .navbar-nav > li > ul > li > a:active, .ccm-page nav.navbar .navbar-nav > li > ul > li > a:focus {
    background-color: #272526;
  }
}
peel1962 replied on at Permalink Reply 1 Attachment
peel1962
Hi again.
I replaced the css code, but I can´t see any difference. It´s still white bg and light font color in the subnav. (see image).
/Peter
peel1962 replied on at Permalink Reply
peel1962
I have another question:
I noticed that the pagelists thumbnails won´t stay centered when you resizing the browser window to minimum, and also how it looks in smartphones as well. The images sticks to the left, but not the text. It would be nice to have the images following the centered text
Is there a way to fix that?
I´m using "Motif Grid Three Column" on the startpage
http://www.cauco.se/v2/

/Peter
corywebb replied on at Permalink Reply
corywebb
Your images are too narrow. They should be a minimum of 737px wide so that they fill the whole area. The theme will resize them down as the window gets smaller, but it won't resize them up to the width of the window if the window is wider than the picture.
corywebb replied on at Permalink Reply
corywebb
Try this...

@media (max-width: 767px) {
  .ccm-page nav.navbar .navbar-nav, .ccm-page nav.navbar .navbar-nav > li > ul > li > a:hover, .ccm-page nav.navbar .navbar-nav > li > ul > li > a:active, .ccm-page nav.navbar .navbar-nav > li > ul > li > a:focus {
    background-color: #272526 !important;
  }
}

concrete5 Environment Information

# concrete5 Version
Core Version - 5.7.5.8
Version Installed - 5.7.5.8
Database Version - 20160412000000

# concrete5 Packages
Motif (0.9.3), Whale Grid Gallery (2.3.2).

# concrete5 Overrides
languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP

# 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.26

# 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 - 20
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_12) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Safari/602.1.50

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.