HELP – w/ Moving main content body left and creating a nav bar

  • Unknown's avatar
    homemnacidade · Member ·

    Hello there, I used to make websites on Dreamweaver (never published them) when I was younger and now I forgotten everything (most of it anyway) I have upgraded my blog to get my hands dirty with the css because I wanted to add a side nav bar opposite the main body because currently my theme booklite has it at the far bottom, I also want to move the main body more to the left of the screen to accommodate the side nav bars presence, is it possible?

    I was so disappointed to upgrade and see the css was blank still like the preview, I know you can get the source via right clicking but still editing that made little if any difference.

    I have tried for a few hours but not successful in getting the main body to move, however I have made it wider and smaller but it has stayed fixate at its default point. Does Booklite theme allow such tweaking please say yes :O and help guide me. It is simply moving what already exists I don’t see why not, there are not any other themes I like.

    Thanks

    here is the blog: http://umhomemnacidade.com/

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, you can have a top navigation bar in Book Lite by utilizing a Custom Menu where you can place pages, categories and the like, and even arrange them in submenus if you wish. Create your Custom Menu at Appearance > Menus and then assign it to the Primary location.

    On responsive width themes such as Book Lite, that do not have a sidebar, moving a footer widget area up and to the side of the content can be very tricky since position: absolute has to be used to move the menu, and that means it has not relationship to any other element in the site. Fortunately with the way the HTML and CSS is structured in Book Lite, we can move it up to the right side of the content without too much trouble. In the following, I’ve used a media query to limit the sidebar move to 768px and wider screen/browser window widths since at that point the minified top menu becomes active and the content area starts to become too narrow. Add the following and see what you think. Make sure and play around with it by narrowing and widening your browser window, and view it on a tablet and phone if you can.

    @media screen and (min-width: 768px) {
    #main {
       position: relative;
       max-width: 1000px !important;
}
    #third {
       position: absolute;
       right: 0;
       top: 0;
       width: 25%;
       margin-top: 2.1em;
}
    #third .widget-title {
        text-align: left;
    }
    #first, #second {
        width: 48%
    }
        #primary {
       width: 68%;
}
}
  • Unknown's avatar
    homemnacidade · Member ·

    Thanks but it didn’t achieve what I wanted and I tried for hours yesterday, I will probably get a refund on the css upgrade or find a different theme alter.

    Thanks the same.

  • Unknown's avatar
    thesacredpath · Member ·

    Can you let me know a little more about what it didn’t do?

    I would suggest looking through the themes and finding one that has a right or left sidebar for you. Moving sidebars on responsive width themes, and having everything flow can be problematic.

  • Unknown's avatar
    designsimply · Member ·

    I was so disappointed to upgrade and see the css was blank still like the preview, I know you can get the source via right clicking but still editing that made little if any difference.

    I’m sorry about that! What was happening is that people were copying and pasting the entire CSS file into the editor without knowing what they were doing and breaking everything, so we found that teaching how to find the specific CSS needed by using browser tools works out better in the end.

    Here is a related link in case it helps:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    I have tried for a few hours but not successful in getting the main body to move, however I have made it wider and smaller but it has stayed fixate at its default point. Does Booklite theme allow such tweaking please say yes :O and help guide me.

    The main container element in the Book Lite theme is a div with an ID of page, and that means you can refer to it using #page as the selector in CSS. The margin for #page is set to “auto,” and that is what is centering the content. To turn that off, you could add the following example to your Appearance > Customize > CSS editor:

    #page {
	margin: 0;
}

    Personally though, I like it better centered. :)

    Thanks but it didn’t achieve what I wanted and I tried for hours yesterday, I will probably get a refund on the css upgrade or find a different theme alter.

    What you’re asking actually isn’t a very simple task, and there are a few different ways it could be approached.

    Here’s another possible solution:

    #page.site {
	max-width: 1000px;
	background-color: #fff;
}

#secondary {
	clear: none;
	float: left;
	width: 20%;
	margin-top: 0;
	padding-top: 25px;
	background: none;
}

#primary {
	float: right;
	width: 78%;
}

#primary img {
	height: auto;
}

@media screen and (max-width: 768px) {
	#primary, #secondary {
		float: none;
		width: 100%;
	}
}

    Try it out and see if it gets you closer to what you’re looking for!

    If you want to flip it so the widgets are on the right, swap the float: right; and float: left; lines in #primary and #secondary.

    If you’d like to try out different themes instead, I can help you look for one. Let me know if you’d like help. :)

  • The topic ‘HELP – w/ Moving main content body left and creating a nav bar’ is closed to new replies.