Can’t Center Navigation Menu

  • page1980

    (@page1980)


    9 years, 7 months ago

    I’m having trouble centering the navigation menu at this website:

    http://hammondhousefineart.com

    Can you look at the coding below and let me know what to add to it to fix this.

    Thank you so much in advance, I really appreciate this.

    – Katie

    /******************************************************************
    NAVIGATION STYLES
    (Main Navigation)
    ******************************************************************/
    div.menu {

    width: 75%;
    margin: 0 auto;
    padding: 0 2%;
    max-width: 1162px;
    position: relative;

    left: 185px;

    }
    div.menu ul { }
    div.menu ul li {

    list-style-type: none;
    float: left;
    }
    div.menu ul li a {
    display: block;
    text-decoration: none;
    }
    div.menu ul li:last-child a {}
    div.menu ul li a:hover {}
    div.menu ul li.current-menu-item a,
    div.menu ul li.current_page_item a {}
    div.menu ul li ul.sub-menu,
    div.menu ul li ul.children {
    position: absolute;
    z-index: 9999;
    width: 200px;
    word-wrap: break-word;
    display: none;
    }
    div.menu ul li ul li a {}
    div.menu ul li ul li a:hover {}
    div.menu ul li ul li:last-child a {}
    div.menu ul li:hover > ul {
    display: inline;
    }
    div.menu ul li ul li ul.sub-menu,
    div.menu ul li ul li ul.children {
    right: -200px;
    position: absolute;
    top: auto;
    margin-top: -30px;
    display: none;
    }
    div.menu ul li ul li:hover > ul.sub-menu,
    div.menu ul li ul li:hover > ul.children {
    display: inline;
    }

    .widget_nav_menu ul li {
    float:none
    }

    .widget_nav_menu ul li ul.sub-menu,
    .widget_nav_menu ul li ul.children,
    .widget_pages ul li ul.sub-menu,
    .widget_pages ul li ul.children {
    position: relative;
    left: auto;
    z-index: 9999;
    width: auto;
    word-wrap: break-word;
    margin-left: 16px; /* for ie8 & below */
    margin-left: 1rem;
    margin-top: 8px; /* for ie8 & below */
    margin-top: 0.5rem;
    }
    .widget_nav_menu ul li ul.sub-menu a,
    .widget_nav_menu ul li ul.children a {}

    .widget_nav_menu ul li ul li ul.sub-menu,
    .widget_nav_menu ul li ul li ul.children {
    left: auto;
    position: relative;
    margin-left: 16px; /* for ie8 & below */
    margin-left:1rem;
    margin-top: 8px; /* for ie8 & below */
    margin-top: 0.5rem;
    top: auto;
    word-wrap: break-word;
    }

    nav[role=navigation] {
    border-top: 5px solid #c1971b;
    background-color: #5e5d5c;
    }
    nav[role=navigation] div.menu {

    }

    nav[role=navigation] ul.menu {

    }
    nav[role=navigation] .menu ul li {}
    nav[role=navigation] .menu ul li a,
    nav[role=navigation] .menu #menu-icon {
    padding: 15px 20px;
    color: #fff !important;
    font-family: "Droid Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 14px; /* for ie8 & below */
    font-size: 0.9rem;
    text-transform: uppercase;
    }

    nav[role=navigation] .menu #menu-icon {
    cursor: pointer;
    display: none;
    }

    nav[role=navigation] .menu > ul li a:hover {
    background-image: url(library/images/trans2.png);
    }

    nav[role=navigation] .menu > ul > li:first-child a {

    }

    nav[role=navigation] .menu ul li.current-menu-item a,
    .nav ul li.current_page_item a,
    nav[role=navigation] .menu ul li.current_page_item a {

    }

    nav[role=navigation] .menu ul.sub-menu li.current-menu-item a,
    .nav ul.sub-menu li.current_page_item a,
    nav[role=navigation] .menu ul.sub-menu li.current_page_item a,
    nav[role=navigation] .menu ul li.current-page-parent ul.sub-menu li a,
    nav[role=navigation] .menu ul li.current-menu-item ul.sub-menu li a,
    nav[role=navigation] .menu ul li.current_page_parent ul.children li a,
    nav[role=navigation] .menu ul li.current_page_item ul.children li a,
    .nav ul li.current_page_item ul.sub-menu li a,
    nav[role=navigation] .menu ul li.current_page_item ul.sub-menu li a {
    background: none;
    }

    nav[role=navigation] .menu ul.sub-menu li.current-menu-item a:hover,
    .nav ul.sub-menu li.current_page_item a:hover,
    nav[role=navigation] .menu ul.sub-menu li.current_page_item a:hover,
    nav[role=navigation] .menu ul li.current-page-parent ul.sub-menu li a:hover,
    nav[role=navigation] .menu ul li.current-menu-item ul.sub-menu li a:hover,
    nav[role=navigation] .menu ul li.current_page_parent ul.children li a:hover,
    nav[role=navigation] .menu ul li.current_page_item ul.children li a:hover,
    .nav ul li.current_page_item ul.sub-menu li a:hover,
    nav[role=navigation] .menu ul li.current_page_item ul.sub-menu li a:hover {
    background: #f5f5f5;
    }

    nav[role=navigation] .menu ul li ul.sub-menu,
    nav[role=navigation] .menu ul li ul.children {
    background: #fafafa;
    box-shadow: 1px 1px 3px #aaa;
    }

    nav[role=navigation] .menu ul li ul.sub-menu li,
    nav[role=navigation] .menu ul li ul.children li {
    border-bottom: 1px solid #f0f0f0;
    width: 200px;
    }

    nav[role=navigation] .menu ul li ul.sub-menu li a,
    nav[role=navigation] .menu ul li ul.children li a {
    font-size: 12px; /* for ie8 & below */
    font-size: 0.75rem;
    font-weight: 400;
    padding: 10px 20px;
    }

    nav[role=navigation] .menu ul li ul.sub-menu li:first-child,
    nav[role=navigation] .menu ul li ul.children li:first-child {

    }

    nav[role=navigation] .menu ul li ul.sub-menu li:first-child a,
    nav[role=navigation] .menu ul li ul.children li:first-child a {

    }
    nav[role=navigation] .menu ul li ul li a {
    color: #555 !important;
    text-shadow: 0px 0px;
    }
    nav[role=navigation] .menu ul li ul li a:hover {
    background: #f5f5f5;
    color: #555 !important;
    }
    nav[role=navigation] .menu ul li ul li:last-child a {}
    nav[role=navigation] .menu ul li:hover ul {}
    nav[role=navigation] .menu ul li ul li ul.sub-menu,
    nav[role=navigation] .menu ul li ul li ul.children {
    margin-top: -44px;
    }
    nav[role=navigation] .menu ul li ul li:hover ul.sub-menu,
    nav[role=navigation] .menu ul li ul li:hover ul.children {

    }

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator t-p

    (@t-p)

    9 years, 7 months ago

    It looks centered to me!

    Thread Starter page1980

    (@page1980)

    9 years, 7 months ago

    Thank you so much. It looks centered to me as well. But my father insists that the menu does not look centered. I do the work on his site. And we live 2 hours apart from each other.

    He took a screenshot of the menu so I could see what it looks like to him. And the screenshot he sent to me shows the menu not being centered.

    When I took a screenshot of the site using https://www.url2png.com

    It shows the site menu not looking centered. See here:

    Menu Does Not Look Centered in This Recent Screenshot

    Moderator t-p

    (@t-p)

    9 years, 7 months ago

    Ask him to clear cache.

    or try different browser/computer.

    Thread Starter page1980

    (@page1980)

    9 years, 7 months ago

    Thank you.

    I asked him to clear the cache yesterday and he told me it still looked uncentered.

    Is there a way to have it look centered in all browsers and platforms?

    He is having someone very important look at his site soon and he wants it to look perfect.

    I appreciate your time and help.

    Katie 🙂

    Michael

    (@alchymyth)

    9 years, 7 months ago

    menu is not centered in Chrome and in Firefox on a PC laptop (about 1000px screen width).

    appears to look centered in larger screens or after zooming out.

    issue might be caused by this style (in style.css of your theme):

    /******************************************************************
NAVIGATION STYLES
(Main Navigation)
******************************************************************/
div.menu {

	 
width: 75%;
	margin: 0 auto;
	padding: 0 2%;
max-width: 1162px;
 position: relative;

left: 185px;    

	
}

    by the ‘left: 185px;’ line …

    the theme, or your customization of it, also has other issues when viewed in a narrower browser, like misaligned header and main image.
    possibly or partly caused by the html validation errors: https://validator.w3.org/nu/?doc=http%3A%2F%2Fhammondhousefineart.com%2F

    https://codex.ww.wp.xz.cn/Validating_a_Website

    Thread Starter page1980

    (@page1980)

    9 years, 7 months ago

    I centered the menus by using this helpful post:

    http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

    Thread Starter page1980

    (@page1980)

    9 years, 7 months ago

    Michael, Thank you for letting me know about the validation errors. I will try to fix each one. Maybe this will help the rest of the site work better. Cheers! Katie

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Can’t Center Navigation Menu’ is closed to new replies.