Support » Theme: Customizr » How do you make the menu center with sticky on scroll?

  • Resolved johnnyr860

    (@johnnyr860)


    http://www.creativeonlinegenius.com/home

    As you can see from my link above the menu is aligned left. I want to make the menu align to the center and make it so that when you scroll down using sticky on scroll that the menu remains centered. Also I changed the text of the menu items to a bigger size but when you scroll down the page sticky on scroll makes the text smaller. The code

    .sticky-enabled .navbar .nav>li>a{ font-size: inherit;}

    does not stop the text from resizing so I am not sure how go about this. Last thing I need is to find a way to get rid of that grey bar that divides the menu from the slider. The code

    header.tc-header {
    border-bottom: 0;
    }

    doesn’t seem to do the trick. Help is appreciated.

Viewing 7 replies - 1 through 7 (of 7 total)
  • about the font-size, since you use a font-size of 1.8em, then:
    .sticky-enabled .navbar .nav>li>a{ font-size: 1.8em; }

    more on inherit

    About the border, you removed it, what you see is the background of a pushing div when sticky header is enabled. So make your border with the same color of the header background, and if you want to disable the sticky border don’t use this:
    .sticky-enabled .tc-header { border-bottom-width: 10px;}

    About centering the menu, look if this helps:
    https://wordpress.org/support/topic/center-menu-23?replies=11#post-6587995

    Well the thing is I want to get rid of the border. I don’t like the grey bar on my site in the header so I wanted to get rid of it and the code you gave me doesn’t do anything to get rid of it.

    The code from the link you just gave me that I just checked out centers the menu but not on sticky on scroll. With sticky on scroll when you scroll the page down the menu shifts itself back tot he left and the menu even pushes itself down more instead of staying in the same height alignment as before sticky on scroll.

    Not sure how to fix those,

    add:

    .sticky-enabled .navbar-wrapper {
        float: none;
        margin: auto;
        clear: both;
    }
    .sticky-enabled .navbar .navbar-inner { margin-bottom: 19px; margin-top: 5px;}

    to center the whole navbar-wrapper on scroll.

    Since you wanna make all these customizations, maybe would be better for you taking a look at this resource:
    http://doc.themesandco.com/customizr/browsers-dev-tools/

    Hope this helps.

    Thank you this works perfectly. But the only thing I still have is that grey bar I can’t seem to get rid of that divides the menu from the slider. I was trying to get rid of the entire bar but I’m not sure since I can’t get the coding that supposed to hide it to work.

    To remove the transitory effect about the grey line use this:

    .tc-header{
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

    Thank you for all your help this did the trick perfectly! I appreciate it 🙂

    glad we finally succeed 😀

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How do you make the menu center with sticky on scroll?’ is closed to new replies.