• Resolved katiecoleslaw

    (@katiecoleslaw)


    Hi everyone,
    I’m looking to align the site title with the menu so they sit together on the same line

    Site link

    I’d like to center the title but keep the menu (home, sample page) to the right. Is this possible?

    Many thanks in advance!

Viewing 5 replies - 16 through 20 (of 20 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In your Child Theme style.css file there is some styling that overrides your “text-align: right;“:

    .site-header h1, .site-header h2 {
    text-align: center;
    }

    Try removing this:

    .site-header h1,

    Thread Starter katiecoleslaw

    (@katiecoleslaw)

    I did that and it went back to the left again. I tried adding `.site-header h1, .site-header h2 {
    text-align: center;
    }` and now it’s moved slightly to the middle but not much

    Thread Starter katiecoleslaw

    (@katiecoleslaw)

    I’ve managed to move the site header to the middle, but now the site title and site menu won’t fit on the same line –

    /* Header */
    .site-header {
    	padding: 0;
    	padding: 0;
    }
    .site-header h1,
    .site-header h2 {
    	text-align: center;
    }
    .site-header h1 a, .site-header h2 a {
        color: #515151;
        display: inline-block;
        text-decoration: none;
        width: 198%;
    }
    .site-header h1 a:hover,
    .site-header h2 a:hover {
    	color: #21759b;
    
    }
    .site-header h1 a, .site-header h2 a {
        color: #515151;
        display: inline-block;
        text-decoration: none;
        width: 99%;
        font-family: 'Futura','Helvetica',sans-serif;
    }
    .site-header h2 {
    	font-weight: normal;
    	font-size: 13px;
    	font-size: 0.928571429rem;
    	line-height: 1.846153846;
    	color: #757575;
    }
    .header-image {
    	margin-top: 24px;
    	margin-top: 1.714285714rem;
    }
    
    /* Navigation Menu */
    .main-navigation {
    	margin-top: 24px;
    	margin-top: 1.714285714rem;
    	text-align: center;
    }
    .main-navigation li {
    	margin-top: 24px;
    	margin-top: 1.714285714rem;
    	font-size: 12px;
    	font-size: 0.857142857rem;
    	line-height: 1.42857143;
    }
    .main-navigation a {
    	color: #5e5e5e;
    }
    .main-navigation a:hover {
    	color: #21759b;
    }
    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    	display: none;
    }
    .main-navigation ul.nav-menu.toggled-on,
    .menu-toggle {
    	display: inline-block;
    }

    Site link

    What am I doing wrong? ?? ??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    All I can do is provide suggestions, sorry. I can’t make you use the CSS I recommended.

    Thread Starter katiecoleslaw

    (@katiecoleslaw)

    oh my goodness, just totally realised the mistake I was making – I have two coda’s open and I kept using the old file. I’ve fixed it now!
    Thank you SO much for your help, Andrew. Sorry for being such a pain ??

Viewing 5 replies - 16 through 20 (of 20 total)
  • The topic ‘[Theme: Twenty Twelve] Align site title with menu’ is closed to new replies.