Menu problems

  • Resolved billyryanwilliams

    (@billyryanwilliams)


    10 years, 8 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

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 8 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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 8 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

    Thread Starter billyryanwilliams

    (@billyryanwilliams)

    10 years, 8 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

    Thread Starter billyryanwilliams

    (@billyryanwilliams)

    10 years, 8 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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 8 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.

    Thread Starter billyryanwilliams

    (@billyryanwilliams)

    10 years, 8 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;

}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 8 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.

    Thread Starter billyryanwilliams

    (@billyryanwilliams)

    10 years, 8 months ago

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 8 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).

    Thread Starter billyryanwilliams

    (@billyryanwilliams)

    10 years, 8 months ago

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

    Thread Starter billyryanwilliams

    (@billyryanwilliams)

    10 years, 8 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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 8 months ago

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

    Thread Starter billyryanwilliams

    (@billyryanwilliams)

    10 years, 8 months ago

    Yeah

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 8 months ago

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

    #main {
 width: 60%;
 margin: 0 auto;
}

    Thread Starter billyryanwilliams

    (@billyryanwilliams)

    10 years, 8 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?

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • The topic ‘Menu problems’ is closed to new replies.