ShoeLace1291

Yeah I was kinda suspecting it was a JS issue. Most of the JS comes from the Pro theme so this makes it kind of frustrating. This is the only custom JS that I have written: (function($){ $('.nav-link a').on('click', function(e){ var $target; var $link = $(this); var $listItem = $(this).parent(); /* determine which section we're looking for */ if($listItem.hasClass('products')){ $target = 'products' } else if($listItem.hasClass('services')){ $target = 'services'; } else if($listItem.hasClass('blog')){ $target = 'blog'; } else if($listItem.hasClass('about')){ $target = 'about'; } else if($listItem.hasClass('contact')){ $target = 'contact'; } else if($listItem.hasClass('intro')){ $target = 'intro'; } /* update css on currently active section */ $('.page.active').removeClass('active', 1000); $('.nav-link a.active').removeClass('active'); /* update css on newly selected section */ $link.addClass('active'); $('.page#'+$target).addClass('active', 1000); window.dispatchEvent(new Event('resize')); //I added this in the hopes that it would fix the hidden content issue e.preventDefault(); }) /* Collapse the menu when a link is activated and return the toggler to the hamburger icon. */ $('.x-menu-collapsed .menu-item a').on('click', function(e){ $('.x-anchor').removeClass('x-active') $('.x-anchor span span span span').attr('style', '') $('#e33-4-off-canvas').attr('aria-hidden', true).css('visibility', 'hidden') }) $('.x-anchor-toggle').on('click, touchend', function(){ $('#e33-4-off-canvas').css('visibility', 'visible') }) })(jQuery); Is there anything in my custom JS that could possibly causing issues?

I recently started using ThemeCo's Pro theme in wordpress. It has a steep leearning curve. I have been trying to fix this issue for the past 4 days. I am making my site with a single page design. Each of the Pro theme sections serves as a page. I hide all the sections except for the one that's being viewed. When the user clicks on a link in the menu, the corresponding page is shown. The issue is that some of my content is being hidden and I dont know why. The weird thing is that when I show all sections so that you can scroll to see them all, the content displays normally. Then when I add the css to hide all pages except for the active one, lots of stuff breaks. The even weirder part is that if you click the restore down button on your browser and then maximize again, everything displays correctly. To see what I mean in action, click here. This is my CSS: .x-bar { box-shadow: unset !important; width: 100%; } .entry-wrap { background: unset !important; box-shadow: unset !important; } body:not(.home) .entry-wrap { margin-top: 15em; margin-bottom: 5em; } header .x-bg-layer-upper-image { background-position: top !important; } .logo { width: 12em !important; height: auto !important; display: block; position: absolute; top: 2em; left: .5em; } .x-container.offset { margin: 0; } .x-container.max { max-width: unset !important; } .entry-wrap { width: 100%; min-height: 100vh; padding: 0; } .entry-content { margin-top: 0; } .entry-title { display: none; } .x-section { padding: 0 !important; } .cs-content .x-section { min-height: 100vh; } .cs-content .x-section .x-container { width: 50%; } .x-section .x-bg { position: absolute; top: unset; bottom: 0 !important; } .x-section .x-bg-layer-lower-image, .x-bg-layer-upper-image { background-size: 100% auto !important; } .x-section .x-bg-layer-lower-image { background-position: bottom !important; } .x-section .x-bg-layer-upper-image { background-position: top !important; } #wpcf7-f155-p35-o1 > form > p:nth-child(6) { text-align: center; } .wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-textarea { background: none !important; border-width: 0px 0px 2px 0px !important; border-bottom: 2px solid rgb(1, 34, 61); box-shadow: unset; color: #fff !important; } .tg-grid-wrapper { text-align: center; } .x-container.max { width: 100%; } .x-site > .x-container.width { width: 100% !important; } body { background: #01172d; /* Old browsers */ background: -moz-linear-gradient(-45deg, #01172d 0%, #0071bd 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #01172d 0%,#0071bd 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #01172d 0%,#0071bd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background-position: bottom; background-attachment: fixed; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01172d', endColorstr='#0071bd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ color: #fff !important; } footer { position: absolute; bottom: 0; display: none; } h1 { color: #29abe2 !important; } h2, h3, h4, h5, h6 { color: #fff !important; } .entry-header .p-meta>span { display:none; } .x-anchor-toggle { margin-left: auto; margin-right: auto; position: absolute; top: 0; left: 0; } .x-section { display: none; } .x-section.active { display: block !important; } @media only screen and (max-width: 768px){ body { font-size: 14px !important; } .logo-full-width img { width: 50% !important; } .x-text p { font-size: 0.75em !important; } header .x-bar { height: 20em !important; } .entry-content { margin-top: 3em; } .cs-content .x-section .x-container { width: 90%; } .e35-4.x-image img { width: 75%; margin: 0 auto; } .e35-6 h1 { text-align: center; } .x-text-headline h1 { font-size: 3em; } .e35-6.x-text .x-text-content-text-primary { line-height: 1.0 !important; font-size: 2em !important; margin: 0.5em 0 0.25em 0 !important; } .x-bg-layer-lower-image { position: fixed; } body { overflow-x: hidden !important; } } @media only screen and (min-width: 767px) and (max-width: 1200px){ .cs-content .x-section .x-container { width: 90% !important; } } @media only screen and (min-width: 768px){ body.home .cs-content .x-section .x-container { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; align-content: center !important; min-height: 100vh; } } How can I fix this? Thanks in advance.

I am having problems with my site header and I can't for the life of me figure them out. I want to split the header into two columns. The height of the header should be determined by the contents of the h1 and p tags inside the left column. The right column should be split up into two rows of equal height containing the navigation menu and social links. I would like to vertically align each of those menus in the center of their parent divs. For some reason, the height properties aren't changing the height of those right column rows at all. What am I doing wrong? Is there a better way to do this? Check out my jsFiddle to see the outcome of my current code... https://jsfiddle.net/hsjkc4at/ This is an example of what I want... This is my HTML: <header> <div id="banner"> <div class="container"> <div id="banner-inner"> <div id="banner-left"> <h1>Site Name</h1> <p>Some catchy slogan...</p> </div> <div id="banner-right"> <div id="banner-top"> <ul> <li>Find Me On:</li> <li><a href+ "#" title="Facebook"><i class="fa fa-facebook-square"></i></a></li> <li><a href+ "#" title="Twitter"><i class="fa fa-twitter-square"></i></a></li> <li><a href+ "#" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a></li> <li><a href+ "#" title="Instagram"><i class="fa fa-instagram"></i></a></li> </ul> </div> <div id="banner-bottom"> <nav> <ul id="menu-menu-1" class="nav navbar-nav"> <li><a title="Home" href+ "#">Home</a></li> <li><a title="Blog" href+ "#">Blog</a></li> <li><a title="Resources" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a> <ul role="menu" class=" dropdown-menu"> <li><a title="HTML & CSS" href+ "#">HTML & CSS</a></li> <li><a title="JavaScript & jQuery" href+ "#">JavaScript & jQuery</a></li> <li><a title="PHP" href+ "#">PHP</a></li> <li><a title="MySQL" href+ "#">MySQL</a></li> </ul> </li> <li><a title="Portfolio" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Portfolio <span class="caret"></span></a> <ul role="menu" class=" dropdown-menu"> <li><a title="Web Designs" href+ "#">Web Designs</a></li> <li><a title="Photo Gallery" href+ "#">Photo Gallery</a></li> <li><a title="Development Projects" href+ "#">Development Projects</a></li> <li><a title="Graphic Designs" href+ "#">Graphic Designs</a></li> </ul> </li> <li><a title="Services" href+ "#">Services</a></li> <li><a title="About" href+ "#">About</a></li> <li><a title="Contact" href+ "#">Contact</a></li> </ul> </nav> </div> </div> </div> </div> </div> </header> This is my CSS: header { background: #D7DADB; margin: 0px; padding: 0px 15px; border-bottom: 15px solid #FC4349; display: table; position: relative; width: 100%; } header #banner { padding: 5px; display: table; position: relative; width: 100%; color: #2C3E50; margin: 0px; } header #banner #banner-inner { width: 100%; } header #banner #banner-left { padding: 0px 25px 0px 0px; float: left; } header #banner #banner-left h1 { font-size: 4em; color: #FC4349; font-family: PowerChord; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; margin: 0px; padding: 0px; line-height: 1.3em; } header #banner-left p { font-size: 1.7em; font-family: Nirmala; color: #2C3E50; margin: 0px 0px 10px 0px; line-height: 1.3em; } header #banner #banner-right { text-align: right; height: 100%; float: right; } header #banner #banner-right #banner-top { text-align: right; height: 50%; overflow: auto; } header #banner #banner-right #banner-top ul { list-style: none; width: 100%; text-align: right; margin: 0; padding: 0; } header #banner #banner-right #banner-top > ul > li { display: inline-block; margin-right: 15px; } header #banner #banner-right #banner-top > ul > li a { font-size: 1.5em; color: #FC4349; } header #banner #banner-right #banner-bottom { border-top: 1px solid #6DBCDB; text-align: right; } header #banner #banner-right #banner-bottom > nav { position: relative; } .nav.navbar-nav { position: relative; } .nav.navbar-nav > li > a { color: #2C3E50; font-family: NirmalaBold; font-size: 1.3em; padding: 5px 5px; } .nav.navbar-nav > li > a:hover { background: #FC4349; color: #fff; } .nav.navbar-nav > li > a:focus { background: #6DBCDB; color: #fff; } .dropdown-menu { background: #fff; border: 1px solid #FC4349; border-bottom: 0px; padding: 0px; } .dropdown-menu > li { border-bottom: 1px solid #FC4349; } .dropdown-menu > li > a { color: #FC4349; text-decoration: none; padding: 15px 25px 15px 10px; } .dropdown-menu > li > a:hover{ background: #FC4349; color: #fff; }

I am currently in the process of developing a very simple CMS for my personal website. There will be no member login accounts but I will still need to have an admin panel which I can manage my content from. I would of course be the only person accessing this area. My issue is that I need a secure way to store a login password without the need for an extra database table. How unsecure would it be to store this password in a class variable that I can access throughout my CodeIgniter controllers? Can you think of any other ways to do this that would be more secure? Thanks for your time.