Developing (v7+)

Sticky Navbar

Permalink August 07, 2019 at 5:22 AM

Hi
I would really appreciate some help. I have a dropdown megamenu and I'm trying to make it stick to the top after scrolling. I've tried many instances of css and javascript but I just can't get it to work.
Many thanks if you can help.
I'm on Concrete5.8.4.2

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.navbar {
  overflow: hidden;
  background-color: #fff;
  font-family: Arial, Helvetica, sans-serif;

Viewing 15 lines of 127 lines. View entire code block.

 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
  box-sizing: border-box;
}
 
body {
  margin: 0;
}
 
.navbar {
  overflow: hidden;
  background-color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}
 
.navbar a {
  float: left;
  font-size: 16px;
  color: #292929;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
.dropdown {
  float: left;
  overflow: hidden;
}
 
.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: #292929;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}
 
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #F1F1F1;
}
 
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
 
.dropdown-content .header {
  background: #fff;
  padding: 16px;
  color: #292929;
}
 
.dropdown:hover .dropdown-content {
  display: block;
}
.column {
  float: left;
  width: 33.33%;
  padding: 30px;
  background-color: #fff;
  height: 250px;
}
 
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
 
.column a:hover {
  background-color: #F1F1F1;
}
 
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>
 
<div class="navbar">
  <a href="#home">home</a>
  <a href="#contact">contact</a>
  <a href="#about">about</a>
  <div class="dropdown">
    <button class="dropbtn">portfolio 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>TJB Photo</h2>
      </div>   
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div> 
</div>
 
 
</body>
</html>

Steevb replied on Aug 7, 2019 at 9:01 am Permalink Reply

You do not have anything ‘fixed’?
Use css:

.navbar{
position: fixed;
z-index: 3
}

tjbphoto replied on Aug 7, 2019 at 1:58 pm Permalink Reply

Hi Steevb

I've removed all the fixed, sticky and js as I can't get it to work. I've had it working without the dropdown but its a megamenu which is the whole point.

Many thanks for your help.

helvetica replied on Aug 7, 2019 at 9:54 am Permalink Reply

this little script might help:
http://stickyjs.com/
easy to configurewith lots of options.

tjbphoto replied on Aug 7, 2019 at 2:00 pm Permalink Reply

Hi Helvetica
I've played with it but it keeps freezing the editing interface. Annoying to keep revising versions.
Thanks for your help, I will keep trying.

Steevb replied on Aug 7, 2019 at 3:00 pm Permalink Reply 1 Attachment

I set up a quick demo with css below:

.navbar {
 margin: 0;
  background-color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  position: fixed;
  width:100%;
  top:0;
  border-bottom: 1px solid #f00
}

See attached movie, if it uploads?

tjbphoto replied on Aug 8, 2019 at 10:46 am Permalink Reply

Many thanks for that Steevb but I need it " stick " not fixed. The navbar has to ride over another element then stick to the top.
Where did you put the navbar btw. Mine breaks up ( its not in the autonav )
I think this will need js.
Tel

Steevb replied on Aug 8, 2019 at 11:40 am Permalink Reply

do you mean something like this: https://codyhouse.co/demo/secondary-fixed-navigation/index.html...

tjbphoto replied on Aug 8, 2019 at 2:38 pm Permalink Reply

Well, That is very nice but it doesn't have a megamenu dropdown. That has been my problem.
Thanks Steevb

helvetica replied on Aug 9, 2019 at 9:18 am Permalink Reply

1.) Copy jquery.sticky.min.js in your js folder.
2.) Make sure jquery.js is loaded.
3.) In the opening bracket of the header put:

<header id="fixed-header">

4.) In the footer, before the </body> closing bracket put:

<script src="<?php  echo $view->getThemePath()?>/js/jquery.sticky.min.js"></script>
<script> 
   $(document).ready(function(){
        $("#fixed-header").sticky({
            topSpacing:0,
          });
      });
</script>

That gives you a «sticky» header for your purpose. check stickyjs.com to see how to «unstick» at a desired position.

Forums

Developing (v7+)

Sticky Navbar

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?