Navigation Bar

  • Hi All,

    I’m needing some help with getting my navigation menu worked out.
    I’ve tried working with firebug to understand, but when I insert the code into my css it doesn’t work.

    I’d like to:
    1. Center it
    2. Arrange menu items so they are centered with logo (like this site https://www.brightwoodphotography.com/)
    3. resize and change font

    my site: https://meredithcoephoto.com/

    Any help or pointers very much appreciated.
    Thank you in advance.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter meredithcoe

    (@meredithcoe)

    Here’s what it looks like so far:

    .navigation-main {
    clear: both;
    display: block;
    float: left;
    width: 100%;
    }
    .navigation-main ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    }
    .navigation-main li {
    float: left;
    position: relative;
    }
    .navigation-main a {
    display: block;
    text-decoration: none;
    }
    .navigation-main ul ul {
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    position: absolute;
    top: 1.5em;
    left: 0;
    z-index: 99999;
    }
    .navigation-main ul ul ul {
    left: 100%;
    top: 0;
    }
    .navigation-main ul ul a {
    width: 200px;
    }
    .navigation-main ul ul li {
    }
    .navigation-main li:hover > a {
    }
    .navigation-main ul ul :hover > a {
    }
    .navigation-main ul ul a:hover {
    }
    .navigation-main ul li:hover > ul {
    display: block;
    }
    .navigation-main li.current_page_item a,
    .navigation-main li.current-menu-item a {
    }

    Thread Starter meredithcoe

    (@meredithcoe)

    Help…. anyone?

    First of all, are you working with a child theme? If not, read this guide on how to create a child theme: Create a Child Theme.

    Thread Starter meredithcoe

    (@meredithcoe)

    Yes. I have one.

    Thread Starter meredithcoe

    (@meredithcoe)

    I’ve played around in firebug… but I don’t know how to transfer that info over to wordpress.. I have it how I want it in a browser, but I’m clueless at to how to translate that over.

    Thread Starter meredithcoe

    (@meredithcoe)

    I’ve tried simply copy and paste, but that doesn’t do the trick.

    You can copy and paste your results from FireBug to the style.css file in your child theme. You have to be careful when copying and pasting in which you have to ensure that you copy everything.

    Thread Starter meredithcoe

    (@meredithcoe)

    Got it. I’ll try it out now.

    Thread Starter meredithcoe

    (@meredithcoe)

    Thank you for taking the time time help and I do not want to be a burden…I’m just not sure where to copy paste information:

    In firebug it looks like this:

    element.style {
    padding-left: 770px;
}
.navigation-wrapper .menu:before, .navigation-wrapper .menu:after {
    content: " ";
    display: table;
}
.navigation-wrapper .menu:before, .navigation-wrapper .menu:after {
    content: " ";
    display: table;
}
*, *:before, *:after {
    box-sizing: border-box;
}
.navigation-wrapper .menu:after {
    clear: both;
}
.navigation-wrapper .menu:before, .navigation-wrapper .menu:after {
    content: " ";
    display: table;
}
.navigation-wrapper .menu:after {
    clear: both;
}
.navigation-wrapper .menu:before, .navigation-wrapper .menu:after {
    content: " ";
    display: table;
}

    And on my stylesheet it looks like this:

    .navigation-main {
    clear: both;
    display: block;
    float: left;
    width: 100%;
}
.navigation-main ul {
    list-style: none;
    margin: 0;
    padding-left: 150;
}
.navigation-main li {
    float: left;
    position: relative;
}
.navigation-main a {
    display: block;
    text-decoration: none;
}
.navigation-main ul ul {
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    position: absolute;
        top: 1.5em;
        left: 0;
    z-index: 99999;
}
.navigation-main ul ul ul {
    left: 100%;
    top: 0;
}
.navigation-main ul ul a {
    width: 200px;
}
.navigation-main ul ul li {
}
.navigation-main li:hover > a {
}
.navigation-main ul ul :hover > a {
}
.navigation-main ul ul a:hover {
}
.navigation-main ul li:hover > ul {
    display: block;
}
.navigation-main li.current_page_item a,
.navigation-main li.current-menu-item a {
}

/* Small menu */
.menu-toggle {
    display: none;
    cursor: pointer;
}

@media screen and (max-width: 600px) {
    .menu-toggle,
    .navigation-main.toggled-on .nav-menu {
        display: block;
    }

    .navigation-main ul {
        display: none;
    }
}

@media screen and (max-width: 600px) {
	.menu-toggle,
	.navigation-main.toggled-on .nav-menu {
		display: block;
	}

	.navigation-main ul {
		display: none;
	}
}
    Thread Starter meredithcoe

    (@meredithcoe)

    ooops the code in my stylesheet is:

    .navigation-main ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

    If you are overriding code that is set in the main theme stylesheet then add the “!important” tag. For example,

    .something {
  color: #000 !important;
}
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Navigation Bar’ is closed to new replies.