Basic Theme: How can I shift the menu and text to right or left

  • Unknown's avatar
    jimmyluciani · Member ·

    I would like to shift the menu over to the left more because on certain web browsers, the menu does not show as one straight line. Also I would like to shift the menu down so that it lines up to the middle of the logo.

    Also, the text covering the banner picture + the link, how can I shift that to the left so that it lines up with the logo?

    And is it possible to make the content in the middle wider so that it fill more of the page

    What would I put into my CSS for these changes?

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, the parent div for the menu, which has an ID of basis-header-nav has a maximum width setting of about 48%. You can add the following to your custom CSS and adjust the width. I’ve included a max width of 80%, which seems to work well down close to where the menu changes to the small minified menu for tablets and phones. Since this is a responsive width theme though, at around 970px in width, the menu again starts to go to two lines. See what you think of this. 

    #basis-header-nav {
    max-width: 80%;
}
  • Unknown's avatar
    jimmyluciani · Member ·

    That worked perfectly. Thank you!

    Is there a way to shift the text and the clickable “Get Started” on my banner to shift over to the left so that it lines up with the logo?

  • Unknown's avatar
    thesacredpath · Member ·

    This isn’t perfect, but it gets things close. It does vary a little at different browser window widths, and I have limited it to 800px and wider, which is when the logo centers and the minified mobile menu activates. 

    @media screen and (min-width:800px) {
	.product-section {
		margin-left: 3rem;
	}
}
  • Unknown's avatar
    jimmyluciani · Member ·

    Thank you! That is what I had in mind.

    However, I may just keep it the way it is. When I use the CSS you provided, it did look different on other computer screens. It may have looked good on a 20″ screen, but on a laptop the margins were all over the place.

    Is there a way to keep the body text the way it was, but ONLY the “What does your dream home include?” and clickable “get started” shifted to the left to line up with the logo?

    Also, is it possible to lower the menu bar so that it shifts lower and is in the middle of the logo?

  • Unknown's avatar
    thesacredpath · Member ·

    The What does… text and the button reside within .product-section so they are normally bound within that section, so the preferable way is to move that section to the left.

    This uses the same left padding as the header area and a left float, but on wider screens, the heading area stuff stays centered (as a block) and with this solution, the text and button keep moving to the left. At about 1260px in screen width and wider, the logo and text are no longer aligned. It is only aligned below that width. You can give it a try. 

    .banner .product-section {
    float: left;
    padding-left: 3rem;
}

    This solution seems better. It mimics the widths and left/right padding on the header area. To keep the alignments correct at narrower window/screen widths, I have again limited this to 800px wide and wider because things go awry below that width. Give it a try. 

    @media screen and (min-width:800px) {
.banner .product-section {
    max-width: 1100px;
    padding-left: 3.75rem;
    padding-right: 3.75rem;
}
}
  • Unknown's avatar
    thesacredpath · Member ·

    I should mention that the second solution isn’t perfect as things are misaligned slightly above 1000px and the text line goes to one line at about 1300px in width.

  • The topic ‘Basic Theme: How can I shift the menu and text to right or left’ is closed to new replies.