Navigation issue

Permalink Browser Info Environment
Hi,
I want to use mage menu with seren and it works fine except when it comes to mobile phone navigation then mega menu does not work. It seems to be some sort of clash with seren. I experimented with removing a div class in the header which related to the nav and it allowed me to see mega menu in a vertical mode rather than collapsed though it was still not functional.

Any thoughts?
Thanks
Phil

Type: Pre-Sale
Status: Resolved
PhilYoung
View Replies:
pilipala replied on at Permalink Reply
pilipala
Hi

The Seren theme menu is quite complicated, as it has different areas incorporated into the navigation. Therefore, it may not be the easiest theme to use with the mega menu addon. In addition, it has a lot of styles that are attached to the menu.

That said, if you remove all of the divs relating to the nav functionality, you may be able to get it to work, but might need to make some further customisations. You could try removing the following code from header.php:

approx line 45,106
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
</nav>
<!--/.navbar-fixed-top -->


approx line 78 - 81
<div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          </div>
          <!--/.navbar-header -->


approx line 99,101
<div id="navbar" class="navbar-collapse collapse">
  </div>


Please ensure that you save your modified header.php elsewhere so that you can upload it again should you ever update your Seren theme.

Thanks,

Jennifer
PhilYoung replied on at Permalink Reply
PhilYoung
Hi Jennifer
Thanks for the suggestions
removing this piece of code
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
</nav>
<!--/.navbar-fixed-top -->
.
Totally damages the look of the header.
The mega menu works on any windows browser at any size and goes into mobile hamburger mode a-ok. It also work on tablets but its the mobile phone nav that is the issue all i get is a vertical overlay of the mega menu that does not work. Some kind of loading issue I guess.

I will contact the mega menu developer and see if he has any thoughts thought he is not responding to requests at the moment.

Again thanks for your suggestions, most appreciated.
Best
Phil
pilipala replied on at Permalink Reply 2 Attachments
pilipala
Hello

Yes, I'm afraid that the Seren theme's menu is using Bootstrap and I suspect it is hard to use Mega Menu without a lot of customisation. That div is a Bootstrap div and it is possible that leaving it in may be causing problems for your mega menu, as there are a lot of Bootstrap menu styles attached to the div.

I tried removing it and it didn't seem to affect the appearance of the top menu greatly, although it takes away the "fixed" aspect of the menu, i.e. the menu won't stay fixed to the top of the page when you scroll. Please see attached images.

There are other themes on the marketplace that you might find easier to use with the Mega Menu, as some themes just have an empty editable area for the menu, whereas ours tend to be more integrated and rely on using a Bootstrap menu that comes with the theme, rather than an external menu. You could try asking the Mega Menu developer if there are any themes that he recommends using with it.

If you would like us to look at your menu, you can send the link. Please note this thread is public, so if you want to send it privately, please pm or email contact@pilipalawebdesign.com

Thanks,
Jennifer
pilipala replied on at Permalink Reply 2 Attachments
pilipala
From looking at the link that you sent, I see what you mean. I don't know if you may need to adjust your mega menu settings to suit the theme (please see attached image), e.g. changing the colour to white and the position of the icon.

You will need to add custom CSS to increase the z-index for the hamburger as the fixed menu with Seren has a z-index of 1030, so it must be greater than this to show.

For example, with the settings that I used, I added this CSS (Go to Cog icon > Design > Customise > Custom CSS > enter your CSS in the popup and save for entire site):

#nav-icon3 {
    z-index: 1200;
}

I don't know if there are different selectors depending on the settings chosen, so you may need to use something like Firefox page inspector to see which selector you need to target with your CSS.

https://developer.mozilla.org/en-US/docs/Tools...

Thanks,

Jennifer
PhilYoung replied on at Permalink Reply
PhilYoung
Hi Jennifer,
I will explore all the css change tomorrow.
In the meantime do you understand this message when i inspect the pages

Source map error: request failed with status 404 Resource URL: http://.../packages/seren/themes/seren/css/bootstrap.min.css 
Source Map URL: bootstrap.min.css.map[Learn More]


Best
Phil
pilipala replied on at Permalink Reply
pilipala
Hi

You could delete this line

/*# sourceMappingURL=bootstrap.min.css.map */

which appears at the very end of bootstrap.min.css, located here:

seren\themes\seren\css

Please see this thread for more information:

https://stackoverflow.com/questions/21773376/bootstrap-trying-to-loa...

Thanks,

Jennifer

concrete5 Environment Information

# concrete5 Version
Core Version - 8.3.2
Version Installed - 8.3.2
Database Version - 20180122213656

# concrete5 Packages
List files from set (1.0.13), Login/Logout Link (1.0), Login Block (0.9.3), Login Dialog (0.9.7), Login Page Background (0.9), Mega Menu (1.6.2.2), Seren (1.0.5), Simple Gallery (1.0.7), Tallacmans Tasty Templates (1.0)

# concrete5 Overrides
None

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

# Server Software
Apache

# Server API
litespeed

# PHP Version
5.6.35

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

# PHP Settings
max_execution_time - 90
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - -1
max_input_vars - 1000
memory_limit - 128M
post_max_size - 8M
sql.safe_mode - Off
upload_max_filesize - 16M
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
opcache.max_accelerated_files - 2000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5
zend_optimizerplus.max_accelerated_files - 2000
zend_optimizerplus.max_file_size - 0
zend_optimizerplus.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

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.