WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Menu problems (18 posts)

  1. billyryanwilliams
    Member
    Posted 11 months ago #

    Hey guys,
    just setting up my website and using spun as my child theme. I've been trying to centre everything and have managed to succeed with the logo and nav bar. However as soon as I try so center the circles the nav bar loses its formatting. I'm pretty sure this is something simple I'm just missing (the nav bar seems to be responsive to any move in the main div).

    http://www.charcombeandwills.com

    I've left the site with the menu and title as I would like it, would appreciate any tips on how to centre the circles beneath :)

    Thanks,

    Billy

  2. Andrew
    Forum Moderator
    Posted 11 months ago #

    Did you know Spun is a responsive theme? The technique you're using to centre things isn't going to work if you resize your browser.

  3. Andrew
    Forum Moderator
    Posted 11 months ago #

    To center the logo responsively you'd do:

    #masthead { text-align: center; }
    
    #masthead img {
     float: none;
     margin-left: 0;
    }

    You probably want to remove the margin on the anchor tag surrounding it too.

    http://www.w3.org/Style/Examples/007/center.en.html

  4. billyryanwilliams
    Member
    Posted 11 months ago #

    I had completely disregarded the fact it was responsive. Haven't used a responsive theme before so will do some research. Thanks so much!

    Billy

  5. billyryanwilliams
    Member
    Posted 11 months ago #

    So I changed what you said and it hasn't made any difference (I think).

    I've uploaded a picture here ( http://charcombeandwills.com/wp-content/uploads/2013/08/websitedraft.png ) of what I want to achieve in responsive form.

    From what I understand it is changing the relative and absolute values, but I'm a little confused as to how these work. If you could explain or provide me any links where I could figure it myself I'd be very grateful.

    Thanks for your help so far,

    Billy

  6. Andrew
    Forum Moderator
    Posted 11 months ago #

    I don't think you can center things by absolute/relative positioning, see the resource I linked above.

    Try adding this to now get the navigation centred;

    .main-navigation {
     clear: left;
     width: 100%;
    }
    
    .main-navigation ul {
     margin:  0 auto;
     display: table;
    }

    display: table is a shortcut to get the width of the element. You don't want to set a width because the navigation is going to change its width when items are added/removed/renamed.

  7. billyryanwilliams
    Member
    Posted 11 months ago #

    Thanks, I've now applied that to the main div as well which means I have the basis for what I want. You're a star.

    Is there a way to make sure everything is centred on the page and together. Maybe my eyes are wonky but it still seems all a bit off centre?

    For anyone that has followed this the code I've added is;

    */the main content css has a really long name so i've replaced it\*
    
    #main {
    
    margin: 0 auto;
    display: table;
    
    }
  8. Andrew
    Forum Moderator
    Posted 11 months ago #

    Is there a way to make sure everything is centred on the page and together.

    There isn't a way to get everything centred on the page in 1 CSS style.

    Maybe my eyes are wonky but it still seems all a bit off centre?

    Yeah, caused by this;

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0 auto;
    display: table;
    }

    Don't do that. Again, there isn't one style you can use to centre everything.

    For anyone that has followed this the code I've added is;

    Out of personal experience if you shortcut (display: table) things that don't need to be shortcutted then your page layout may mess up on different browsers.

  9. billyryanwilliams
    Member
    Posted 11 months ago #

    (Y) shows how much I know haha. I'll find another way around it.

  10. Andrew
    Forum Moderator
    Posted 11 months ago #

    BTW when you set widths (now that you're not shortcutting) you have 2 options to keep things responsive:

    1. Continue using pixels as the measurement (e.g 1000px) and then apply media queries at particular browser widths smaller widths (e.g 300px on mobile).

    2. Instead of using a static measurement like pixels use percentages (e.g 80%) or 'em's (e.g 62.5em), so that the webpage resizes automatically at different widths.

    Otherwise you'll end up with a massive horizontal scrollbar when you view your site on mobile because you'll have something set at a 1000 pixel width whereas your mobile screen will only be 300 pixels wide (for example).

  11. billyryanwilliams
    Member
    Posted 11 months ago #

    Yeah I've been trying to (now) in % terms after familiarising myself with responsive themes.

  12. billyryanwilliams
    Member
    Posted 11 months ago #

    I've worked out what is causing the images to be placed either left or right and that's the float: left tag (obvious).
    However I cannot work out how to move the posts to the centre of the div as unchecking/removing the float stacks the posts on top of each other. Is playing with the margins shorcutting and cheating? I don't want to quick fix and come across later browser issues.

  13. Andrew
    Forum Moderator
    Posted 11 months ago #

    The posts; do you want only 3 per line/ row?

  14. billyryanwilliams
    Member
    Posted 11 months ago #

    Yeah

  15. Andrew
    Forum Moderator
    Posted 11 months ago #

    Then give the element that wraps them enough width for just 3 items:

    #main {
     width: 60%;
     margin: 0 auto;
    }
  16. billyryanwilliams
    Member
    Posted 11 months ago #

    This has worked when page is in a decent size browser, not perfect on mobile devices but I'm getting my head round the process now.

    For the nav bar I'm guessing I would set media queries so that when it's in a tiny browser (ie phone) it is still accessible?

  17. Andrew
    Forum Moderator
    Posted 11 months ago #

    The nav bar already has mobile support where a menu button just toggles showing/ hiding the menu items.

  18. billyryanwilliams
    Member
    Posted 11 months ago #

    Okay I see that, sorry for the bombardment.

    At slightly larger widths (ipad mini is 768px) I end up with an in between situation that is a consequence of the #main { width: 40%; margin: 0 auto; } solution.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.