WordPress.org

Ready to get started?Download WordPress

Forums

Tiny Forge
[resolved] centering the menu under the header (12 posts)

  1. Jackandg
    Member
    Posted 11 months ago #

    Hello, i'm trying to center the menu under the header - any advice?

    My site is jackandg.com

    Thank you very much.

  2. Tomas Mackevicius
    Member
    Theme Author

    Posted 11 months ago #

    Hi, Jackandg, put this style.css line into your child theme:

    .main-navigation ul.nav-menu {
        text-align: center;
    }

    Your site looks good, I can imagine later it will be even better ;)

  3. Jackandg
    Member
    Posted 11 months ago #

    Thank you Thomas! - I created my child theme, and added the line. works perfectly!

  4. Jackandg
    Member
    Posted 11 months ago #

    Hi Thomas, i'm sorry - one more question.

    before i created the child theme, I had removed a line of php in order to center the Logo "jack + g". In content-page.php (i think), I removed a line that looked like this:

    <h1 class="entry-title"><?php the_title(); ?></h1>

    When I removed the line it centered the logo. Next I created a child theme, added your line of code, and everything was centered. I then noticed that when I make the window smaller the jack and g logo was not reducing in size while everything else was. So I created a logo that is 400 pixels in with as opposed to the previous 960 width logo. Now my logo is no longer centered.

    Can you help? Thank you.

  5. Tomas Mackevicius
    Member
    Theme Author

    Posted 11 months ago #

    You don't need to remove those lines from header.php. You can disable site title and descr. from WP admin Appearance/Header and unselect "Show header text with your image"

    To center logo add CSS rule to your style.css:

    #site-logo {
        float: none;
    }

    And I think bigger logo (initial version) looked better ;)

  6. Tomas Mackevicius
    Member
    Theme Author

    Posted 11 months ago #

    I suggest you to use FireFox Inspector to see what styles are affecting the elements:

    https://www.youtube.com/watch?v=VcuQ2Bn5bTA

    You can activate it with: CTRL+SHIFT+I

    and select with the mouse element you need.

  7. Jackandg
    Member
    Posted 11 months ago #

    Hi Thomas,

    Thanks for the tip on the firefox inspector! I had a chance to spend some time working with it - I think this will be very helpful!

    - Just to make sure i'm doing this right, is it ok to copy and paste lines that I want to edit into my child theme?

  8. Tomas Mackevicius
    Member
    Theme Author

    Posted 11 months ago #

    If you edit CSS, then yes, you would copy just the things you want to change. If it's a file, then you would copy whole file, eg. header.php and then edit it.

    Just remember about media queries (see readme.txt), because this theme is mobile-first.

    I will include sample CSS file with the next version.

  9. Tomas Mackevicius
    Member
    Theme Author

    Posted 11 months ago #

    You also might want to play with z-index css property of gallery elements, because they cover menu drop-down at: http://jackandg.com/earrings

    Otherwise site progress is nice :)

    Looks like you have already fixed that!

  10. Jackandg
    Member
    Posted 11 months ago #

    Thank you!
    Just found the css line on the forum for the meta slider plugin (:

    .main-navigation li a, .main-navigation li {
    z-index: 9999;
    }

    You mentioned the theme is mobile first, so I looked at the site on my phone. The menu and "Jack + G" logo is a completely different format. Could you help me fix that? -Sorry, i'm pretty new at this.

  11. Tomas Mackevicius
    Member
    Theme Author

    Posted 11 months ago #

    The mobile menu is designed to be like this. You can change the browser window and you will see how media queries are changing the web site look depending on the size.

    I plan to revise mobile menu and make it more like in Underscores theme.

    If you want to display logo in certain browser sizes, play with CSS ;)

  12. Tomas Mackevicius
    Member
    Theme Author

    Posted 10 months ago #

    You can add:

    footer#colophon {
        min-height: 120px;
    }

    Or some other size in px, to make the radial background color not to be cut-off.

    Also if you don't want the menu item Collections to be a link, but just the container for sub-menu items, create a Link menu item (put anything like aaa in link address box) then when it is created, edit it and remove the link address. Hope you will understand what I'm trying to tell :)))

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.