[Support request] Transparent, Sticky Top Menu

Home Forums Support [Support request] Transparent, Sticky Top Menu

Home Forums Support Transparent, Sticky Top Menu

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1471024
    angelarose

    https://ibb.co/0CBZtrn is what I’m trying t do with a hamburger all the way to the left, then a title, and then then the menu tabs. Also,to make it sticky and turn transparent once scrolling. I read some of the other forums but am still confused. Thank you!

    #1471747
    David
    Staff
    Customer Support

    Hi there,

    You can enable the Off Canvas Panel to add a hamburger to the Desktop navigation:

    https://docs.generatepress.com/article/off-canvas-panel-overview/

    Once thats in place – if you can share a link so i can look at what CSS required and if it is possible

    #1471789
    angelarose

    SO I enabled the off-canvas panel: https://ibb.co/n3WWsHn. I already have a hamburger menu in a black box that I’d like to keep only on the home page which the css is:

    .main-navigation .main-nav ul > li > a {
    width: max-content !important;
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    padding-left: 5px;
    padding-right: px;
    padding-top:15px;
    padding-bottom: 15px;
    margin-left:4px;
    }

    button.menu-toggle {
    flex-grow: 0 !important;
    width: auto;
    color: white;
    background-color: black;
    margin-top:50px;
    margin-left:25px;
    margin-bottom:-62px;
    z-index:1;
    }
    button.menu-toggle:hover {
    color: white;
    background-color: black;
    }
    .main-nav{
    width: auto !important;
    }

    .main-nav > ul {
    width: max-content !important;
    margin-top:75px;
    }
    .main-nav > ul > li {
    width: max-content !important;
    margin-top: auto;
    margin-bottom: auto;
    }

    .main-nav {
    position: relative;
    overflow: visible;
    }

    .main-nav > ul {
    position: absolute;
    }

    Is it possible to have this transparent sticky header menu made through a type of element of hook so i can display it or exclude it from specific pages? Thank you!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.