Fixed Main Content Area

  • Hello,

    I have been trying to get to the bottom of this for the better part of a week, and I have exhausted all resources. Basically, when my browser window is larger than about 1000px, my website looks great. If you start to shrink the page, it seems the main content area will “shift” to the right, and overlap with my sidebar. I cannot tell if it is also resizing when this occurs. As you keep shrinking the window, it will shift one more time to the right, and then a third time where it returns to its original, left oriented position. I really want to prevent this area from moving at all, I want a completely fixed page where none of my elements move at all. I have managed to get the header, nav menu, and sidebar to remain fixed, but I cannot for the life of me get the main content area to behave the same. I have looked through a multitude of the theme files and haven’t found anything that seems to make sense.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author themely

    (@themely)

    The Verb Lite theme was designed to be responsive for all devices (desktop to mobile).

    At a certain screen size the right sidebar will shift below the main column.

    This is how it was designed for mobile devices and is normal behavior for responsive (mobile-friendly) websites.

    Verb Lite uses the Bootstrap Framework for its structure and it is built to be responsive.

    There is one comment which I am not sure what you mean,

    ” If you start to shrink the page, it seems the main content area will “shift” to the right, and overlap with my sidebar”

    can you provide a screenshot or link to your site we can have a look?

    Thread Starter rickmeditz

    (@rickmeditz)

    Thanks so much for the hasty response. I’ve managed to get the fixed position on everything, and the only thing I have left to modify is to disable the nav-bar collapse when resizing. How would I go about accomplishing this?

    Theme Author themely

    (@themely)

    Add the following code to the bottom of your style.css file.

    .navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Fixed Main Content Area’ is closed to new replies.