Move "main" content right for side menu

Permalink Browser Info Environment
Trying to make a side navigation menu, and am basing the code off what I found here:http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav...

I placed the above code for the side menu in the global "Sitewide Site Name" block and the menu behaves fine. However, when I can't get the "main" content (slides, header, footer, etc) to slide to the right.

So far I have following working (it only moves words not images, or header):
<span style="font-size:20px;cursor:pointer" onclick="openNav()">☰ Site Menu</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.body.style.marginLeft = "250px";
}
</script>


I tried to adding lines such as:
document.lss-slide.background.marginLeft = "250px" or
.lss-slide.content.marginLeft = "250px" or
c5wrapper.marginLeft = "250px"
Without any success

Any input would be helpful. I apologize if this is a basic quesiton, I'm still learning CSS/Javascript etc.

Thanks,
Chris

Type: Pre-Sale
Status: In Progress
View Replies:
jordif replied on at Permalink Reply
jordif
Hi Chris,

Generally, for this type of menu, you would change the CSS3 transform property:

transform: translate(250px, 0)

For instance, you could add a CSS class ("move-left") to the content when the sidebar is visible:

#c5wrapper {
    transition: 0.5s;
}
#c5wrapper.move-left {
    transform: translate(250px, 0);
    margin-right: 250px; /* optional: this should prevent the horizontal scrollbar from appearing */
}


This is how the concrete5 dashboard works (to make sidebar menus slide in, the transform property is changed).

Here is an experiment I made for the 5.6 version of the theme with this type of menu:

http://longstoryshortparallax.15robots.com/offcanvas...

You can use the browser inspect tool to see wha'ts happening.

Let me know if you have any further questions (and feel free to post a link to your website if you want me to have a look)

Regards,

Jordi
concrete671 replied on at Permalink Reply
Hi Jordi,

Wow - thanks for such a fast response.

Quick follow-up question: Where would I put the classes you describe? I could not tell by looking at the inspect tool (still new at this). Should they go in the Custom CSS section?
When I place your c5wrapper classes in the “style” section of my sidebar menu I do not see the transition. When I put the classes in the javascript section, the menu link (in site name block) becomes unresponsive to mouse clicks.

If you have time, an incomplete version of my website is available at:
http://christopherrhodes.org/

Otherwise, I’ll keep experimenting with it.

Thanks for such a great theme!
Chris
jordif replied on at Permalink Reply
jordif
Hi Chris,

I see you have added an HTML block to the Site Name area, so you could add the classes using that block.

You need to add the CSS definitions in the <style> section and also some javascript code to add and remove the classes in the <script> section.

The final code of the HTML block should look like this:

<style>
body {
    font-family: "Lato", sans-serif;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;


Hope this helps,

Jordi
concrete671 replied on at Permalink Reply
Now I understand!

It works great - thanks

concrete5 Environment Information

# concrete5 Version
Core Version - 5.7.5.6
Version Installed - 5.7.5.6
Database Version - 20151221000000

# concrete5 Packages
Automatic Email Obfuscator (2.0.1), Background Image and Overlay (0.9.7), Basic Snippets Pack (0.9), Breadcrumb Trail Page Links (1.1), Code Display (1.0), Colorpicker Attribute (0.4), Customize Editing Interface (0.9.1), File Reader (2.0.1), Fruitful (1.2), Honest Websites Back To Top (0.9.4), Long Story Short (1.1.2), Quick Tabs (1.0), Random Image (1.0), Stucco (1.0.0), Stylish Ordered Lists (1.0), Thumb Gallery (1.0.3), Wrap anything (0.9.2), Zoomer (1.0.1).

# concrete5 Overrides
languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, 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/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO

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

# Server Software
Apache

# Server API
cgi-fcgi

# PHP Version
5.3.29

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, exif, filter, ftp, gd, gettext, hash, htscanner, iconv, imap, intl, ionCube Loader, json, libxml, mbstring, mcrypt, mhash, mysql, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, pspell, Reflection, session, SimpleXML, soap, sockets, SPL, SQLite, sqlite3, standard, tidy, tokenizer, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend Guard Loader, zip, zlib.

# PHP Settings
max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 4000
memory_limit - 512M
post_max_size - 128M
safe_mode - Off
safe_mode_exec_dir - <i>no value</i>
safe_mode_gid - Off
safe_mode_include_dir - <i>no value</i>
sql.safe_mode - Off
upload_max_filesize - 128M
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 - 1440
soap.wsdl_cache_limit - 5
safe_mode_allowed_env_vars - PHP_
safe_mode_protected_env_vars - LD_LIBRARY_PATH

Browser User-Agent String

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 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.