Skip to content
One Designs One Designs One Designs

Navigation Menu

  • Themes
  • Documentation
  • Plugins
  • Blog
  • Support
  • About
My Account
  • Log In

  • Register
  • Lost Password
Support Forums
  1. Home
  2. Support Forums
  3. Theme Support
  4. Enlightenment
  5. Full Width backgrounds & Header container height?

Full Width backgrounds & Header container height?

Viewing 5 posts - 1 through 5 (of 5 total)
  • October 25, 2016 at 8:47 pm October 25, 2016 #22641
    jthomas
    Participant

    Hello!

    Love the theme, just a couple of questions:

    1. In the demo, the “Drag and Drop” section has a full width blue background. When I try it, my background will not go full width. And yes, I followed your latest tutorial on parallax backgrounds and got it to work in 2 other sections of the site, but not for this. — http://www.trcenter.wpengine.com. What am I overlooking?

    2. I have a logo that is 750 w x 132 h. I saw a couple of people suggested some custom CSS to add to the Design section (under Theme Options) but I cannot get it to work for me. Could you provide the lines of code needed so I can enlarge the the container?

    Thanks so much for your help!

    October 26, 2016 at 6:06 am October 26, 2016 #22643
    Daniel Tara
    Keymaster

    1. Some sidebar locations are wrapped in a fixed-width container, as explained in this tutorial. The location “Secondary Content” you have selected falls in this category. To get the sidebar expand the full width of the viewport you need to select one of these locations: Header Sidebar, Header Secondary Sidebar, Main Sidebar, Footer Sidebar, Footer Secondary Sidebar.

    2. You won’t be able to get a 750×132 logo to fit inside the navbar without significantly altering the entire logic behind how the navbar functions. For example, I don’t see a logo of that size fixed to the top while scrolling or having a navigation menu next to it, which is how it looks right now on your website. if you could better explain how you would like the logo to fit in that space and how the navbar should behave I might be able to help you further.

    October 26, 2016 at 1:56 pm October 26, 2016 #22644
    jthomas
    Participant

    Thank you for the speedy response Daniel!

    Currently, the logo is being resized by the theme and places it above the navigation. I want it to be to the left of the navigation, but significantly larger. Any suggestions for logo size?

    I’m looking to create something similar to this site (that also uses the theme), http://www.soccer-betbrain.com/. I would want the logo not so far to the left, but same general concept. His logo is 470 x 101 px.

    Thank you!

    October 26, 2016 at 2:42 pm October 26, 2016 #22646
    Daniel Tara
    Keymaster

    The website you mentioned placed the logo as a background image, which I wouldn’t recommend, and the logo is indeed resized by the background-size: contain; CSS rule.

    What you’re asking for is pretty tricky since your logo is pretty large and you have quite a few navigation items. I have played around with the CSS for a while and came up with the following setup that will raise the size of your logo to 303×56 without altering the functionality of the navbar:

    First, go to Appearance → Menus and remove the “Home” link since the logo already points to the home page and removing it will provide more space for the logo.

    Then go to Theme Options and uncheck the box “Shrink Fixed Navbar when scrolling” since this setting doesn’t help with a larger logo.

    Afterwards click the Design tab and enter the following code under Custom CSS:

    @media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
    
    @media (min-width: 992px) {
        .navbar-large a.navbar-brand {
            padding-top: 12px;
            padding-bottom: 12px;
        }
    
        .navbar-large .site-logo {
            max-height: 56px;
        }
    
        .navbar-large .nav > li > a {
            padding-left: 15px;
            padding-right: 15px;
        }
    
        .navbar-large .sidebar-navbar {
            padding-left: 15px;
            margin-left: 30px;
        }
    }

    Here’s a screenshot of the result I got:

    October 27, 2016 at 2:21 pm October 27, 2016 #22648
    jthomas
    Participant

    Perfect! Worked just as described for both inquiries!
    Thank you for your help πŸ™‚

Viewing 5 posts - 1 through 5 (of 5 total)

Tagged: container, full width, height, logo, logo size

You must be logged in to reply to this topic.

Useful Information

About Us

We craft beautiful free WordPress themes with advanced functionality. Our themes are licenced under GPL and completely free, which means you can use them in any way you like, whether it’s powering up your website, giving your blog a new look, using it for some other project or modifying and redistributing them.

Never miss another release!

Subscribe to our newsletter and we'll keep you updated with new theme releases and recommendations.

Our Social Media Profiles

  • Facebook

    Like our Facebook page
  • Twitter

    Follow us on Twitter
  • WordPress.org

    Visit our WordPress.org Profile

Useful Links

  • Development Blog
  • Release Cycle
  • Site News
  • Support Policy
  • Contact Us
Copyright © 2009 - 2025 One Designs Created with passion, caffeine, WordPress and Enlightenment Framework