• I am working a site using the Estate Theme and I want to center my menu. I also want to add a logo image or header image(only on home page) but I want the image to expand and contract with the window as you make it smaller or larger. I want no white space to show on the sides. right now my site is on a localhost but the header, menu, and logo is identical to the one on this sites home page http://www.shotbykaren.co.uk/

    currently I removed logo white space (area above menu) by using custom css

    header#masthead hgroup{
    display:none;
    }

    but my logo comes back if I take that out. Any help is greatly appreciated!!!!

Viewing 15 replies - 1 through 15 (of 19 total)
  • Tareq

    (@worthingtech)

    Center menu:

    #menu-front-page {
        display: table;
        margin: 0 auto;
    }

    Either in your Child Theme style.css or via a Custom CSS Manager plugin.

    Thread Starter cantu.juanita

    (@cantujuanita)

    Thank you for the response! I entered it but nothing happened. does it matter that I am using a different menu? I basically created a new menu.

    Tareq

    (@worthingtech)

    Post a link to your site and I’ll take a look. I was working off the default code in the Theme Preview in the repo.

    Tareq

    (@worthingtech)

    Ignore that last post!

    Thread Starter cantu.juanita

    (@cantujuanita)

    🙂 my site is local only right now.

    Tareq

    (@worthingtech)

    Ah ok, which browser do you use?

    Thread Starter cantu.juanita

    (@cantujuanita)

    firefox

    Tareq

    (@worthingtech)

    OK, hover your mouse over the menu on your local site, then right click and select ‘Inspect Element’.

    You should see a little box appear the width of the page at the bottom of the browser.

    You should see lines of HTML code in that box, look for something like:
    <ul id="menu-front-page" class="menu">

    Tareq

    (@worthingtech)

    It probably won’t be exactly that but similar!

    Thread Starter cantu.juanita

    (@cantujuanita)

    I see it now, it says <ul id=:menu-menu-1″ class=”menu”>

    im going to assume that i should change my custom css to say menu-menu-1 and not menu-front-page??? lol Tareq you don’t know how much of a life saver you are!

    Thread Starter cantu.juanita

    (@cantujuanita)

    IT WORKED!!!! thank you my menu is centered!!!

    Tareq

    (@worthingtech)

    I do that a lot! Thank you.

    If you wanted to, you could just use .menu instead of #menu-menu-1 – looks a little neater in the css and applies to all menus.

    Say, for instance if you had a footer menu and wanted that centered too!

    Thread Starter cantu.juanita

    (@cantujuanita)

    Thanks! so I used the same (inspect element) to edit my header image. so now instead of the black and gray default image. It’s the image for my Robotics Lab. Thank You!

    Tareq

    (@worthingtech)

    Yeah it’s a very good tool to use. Enables me to work a lot faster and make my £££!

    Thread Starter cantu.juanita

    (@cantujuanita)

    I have another question if it is not too much work. I added my logo back in because I think I might want my banner to show on every page rather than the just the home page. but between my banner and my menu(menu sits below banner) there is a thin white space. in my css it says

    #masthead hgroup .site-title{
    color: #3c3c3c;
    font-size:28px;
    font-weight: bold;
    line-height: 1;
    margin-bottom:2px
    }

    I changed line-height: to 0 and to none and the white space gets thinner but does not disappear completely. what can I to make it go away and have my banner stop where the menu bar starts?

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Logo and Menu’ is closed to new replies.