• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How to create a top bar in parallax pro?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to create a top bar in parallax pro?

This topic is: resolved

Tagged: parallax-pro, top bar, widget area

  • This topic has 2 replies, 2 voices, and was last updated 5 years, 9 months ago by harryagamez.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • April 19, 2017 at 12:03 pm #205000
    harryagamez
    Participant

    Hello my friends.

    I need a little help with something:

    I am building a website with Parallax Pro and I need a top bar widget area. I've managed to create it using the hook 'genesis_before_header' and it works, but I am having a little problem with the CSS.

    The problem is that the text widget doesnt show correctly. Sometimes there are gaps between the header and the top-bar. Sometimes the wordpress admin bar hides the top bar widget area and mess up with the position of the header and the top bar widget.

    Can anyone help me a little bit?

    The website is: http://fermactelecomunicaciones.com/

    http://fermactelecomunicaciones.com/
    April 26, 2017 at 1:08 pm #205378
    CleanPageDom
    Participant

    Hi Harry

    I believe it is because the .site-header has position: fixed; - so it is covering up your .top-bar.widget-area.

    There are a number of ways around it, depending on how you want the header/nav to behave (ie if you are happy to leave it at the top or if you want it to follow you down the screen).

    One solution may be to add this to .top-bar.widget-area:

    position: fixed;
    width: 100%;
    z-index: 1001;

    Then add this to .site-header:
    border-top: 38px solid #fff; /*The 38px is the height of your top bar*/

    You might also need to adjust .parallax-home .site-inner { margin-top: XXpx; } in order to get the slider to display fully. This might have a knock-on effect on your inner pages, which could probably be solved with some more margin/padding to .site-inner.

    With this solution, the top bar follows you down the page like the header.

    Thanks
    Dom


    Let’s build a website together…

    May 8, 2017 at 9:56 am #206113
    harryagamez
    Participant

    Thank you very much. It worked perfect. I would have never thought in something like this. Nice trick!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble