Customizr single bar (fixed) header/navbar

  • johnbergson

    (@johnbergson)


    9 years, 9 months ago

    Hi all,

    I recently installed the Customizr theme, and love it. Keep up the great work!

    I’ve looked at some demo showcases and I’m especially interested at a small fixed header, as seen here and here. I’ve searched for many snippets, and with the help of these two:

    http://wordpress.org/support/topic/top-menu-remove-space-for-tagline-social-icons
    http://www.themesandco.com/snippet/make-header-sticky/

    I was able to hack it to something very similar to those two websites. But, as you may have already guessed, it’s totally unresponsive! For example when the screen size is below 979px, the toggle menu button is floating 100px below the header in mid-air, instead of inside the header. Or when there are many menu items, some will float below the header, without the header background extending.

    I can hardly find good resources on how to create such a navbar/header for Customizr, can someone perhaps point me into the right direction?

    Help is much appreciated,
    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • ElectricFeet

    (@electricfeet)

    9 years, 9 months ago

    You’re on exactly the right path. You simply need to add knowledge of media queries to the mix.

    The underlying bootstrap CSS uses media queries at certain breakpoints. At different screen sizes, a whole new set of CSS kicks in, so you need to write your own CSS to kick in at that point too.

    You can read about media queries here and here.

    Thread Starter johnbergson

    (@johnbergson)

    9 years, 9 months ago

    Thanks for your reply. I managed to do it without using those media queries, I only needed to add a negative margin to address the floating button. But then again, it feels like an ugly solution. On top of that, I’ve only tested it for Chrome, and medium screen sizes (>1366px). Here is the link to the CSS code I wrote:

    http://pastebin.com/i9GXeZDU

    However, the issue with the menu items floating outside the header still persists, and I have no idea how to solve that, as it tends to happen at different breakpoints depending on the number of menu items. Perhaps adding a wrapper div along with those queries could be the solution. Any suggestions on how to improve this would be great, and much appreciated.

    ElectricFeet

    (@electricfeet)

    9 years, 9 months ago

    Remember that if you see a trick you like on a site, you can always look at their CSS to see how they achieved it. There may also be some php in the background that you cannot see, but the CSS is wide open for all to see.

    Using Firebug or developer tools (watch the video) you can get the link to the CSS.

    For instance, one of the style files for this forum is here. If you grab the link to the file, you can see all the media queries that have been used inside.

    Thread Starter johnbergson

    (@johnbergson)

    9 years, 9 months ago

    Yup, I use that trick regularly with Chrome’s Dev tool. The thing is, most sites supply a minified one-line CSS stylesheet, which is not really readable. I’ll try out Firebug, its Inspect Element function looks promising and more useful than Chrome’s.

    ElectricFeet

    (@electricfeet)

    9 years, 9 months ago

    Ah, that’s easy: just search for “unminify” on Google and use the one you prefer 🙂

    Yes, I’ve tried Firefox’s own inspector and Safari’s, but Firebug is the best in my opinion.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Customizr single bar (fixed) header/navbar’ is closed to new replies.