Creating static menu across the top

Support Area Forums Kerygma Creating static menu across the top

Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question: http://comejourney.org
  • Author
    Posts
  • #32178
    Kymone Hinds
    Participant

    I would like to amend the front page of my site.
    I want to put a menu across the top that stays static even as people scroll down the page. How do I do that?

    #32189
    Bill Robbins
    Moderator

    Thank you for posting this as a separate topic. I do appreciate it.

    You can fix the logo/navigation bar to the top of the screen. Here’s how to do that:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      #header {
      	position: fixed;
      }
      
    3. Update your settings.

    That should cause it to stay in place as you scroll. Let me know if you have any questions.

    Bill

    #32194
    Kymone Hinds
    Participant

    How can I get the menu options back at the top and remove them from that area in the welcome section?

    #32196
    Bill Robbins
    Moderator

    Go to Appearance > Menus in your WordPress dashboard. Click on the locations tab on that screen. Use the drop downs there to assign your navigation menu to the theme’s menu location. Then save your changes.

    Next edit your welcome widget. There is a drop down menu there to select a navigation menu. Use that drop down to change it to “none” and save your changes.

    #32197
    Kymone Hinds
    Participant

    How can I run a bar across the top with a background like this example so the menu options can be more visible? And take off the color for the drop downs?

    http://eastsidestudents.com/

    In this example it seems to be even above the hero image? How can mine look like this?

    #32199
    Bill Robbins
    Moderator

    Instead of the snippet above you would add something like this:

    
    #header {
    	position: fixed;
    	background-color: #000;
    }
    
    #hero-section {
    	top: 100px;
    }
    

    The background color is the #000 in that snippet. Change that to the color you’d like to use for the header background. That should also move the hero area down below the header. You can adjust its vertical position by changing the 100px in that snippet. Smaller numbers will move the hero section closer to the top. Larger ones will move it further down. Play around with that until you find the right fit for you.


    To make the drop-down menus not have a background color, add this to your Custom CSS:

    
    #header nav#top-menu ul li:hover ul {
    	background: transparent;
    }
    
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Creating static menu across the top’ is closed to new replies.