How to make navigation bar links cover the width of the website

  • chrisbabayans

    (@chrisbabayans)


    9 years, 9 months ago

    My site is http://wholesaleclothingforsale.com

    If you see it now, the home, shop, cart, checkout and my account take up about 1/3 of my screen on the navigation/menu bar

    How can this be made so the 5 links, and whatever else I may add in the future, take up the whole screen.

    At the least I want the 5 options to be centered and taking up 1/3 of my screen. IMO it isn’t aesthetically pleasing to have the buttons on the far left.

    Thank you ahead of time!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Sleneau

    (@sleneau)

    9 years, 9 months ago

    Add this to the bottom of your style.css file:

    ul.nav-menu, div.nav-menu > ul {
margin: 0;
padding: 0 40px 0 0;
display: flex;
justify-content: space-around;
}

    Hope that works properly. Have a nice day.

    Thread Starter chrisbabayans

    (@chrisbabayans)

    9 years, 9 months ago

    I cleared the cache and that did not work. Is there a specific place to put it?

    Sleneau

    (@sleneau)

    9 years, 9 months ago

    I, ll take another look at it when I get to my computer.

    Sleneau

    (@sleneau)

    9 years, 9 months ago

    In your wordpress back end, go to Appearence->Editor, and open style.css.

    Copy the whole file, and paste it into a plain text editor (if using TextEdit or Notepad, make certain that the program is NOT in rich text mode when you edit the code).

    Save a copy of this file somewhere safe (and don’t ever save the file again). You will be making changes to the stylesheet, and if something goes terribly wrong, this copy will be your only way of restoring your theme without colossal headache. Once you have saved your file, save it again, but put the word “working” at the end of this save.

    Search for “ul.nav-menu, div.nav-menu > ul” in your file. You should see the following entry on your screen:

    ul.nav-menu,
div.nav-menu > ul {
	margin: 0;
	padding: 0 40px 0 0;
}

    Add the following two lines AFTER the line that says, Padding: 0 40px 0 0; :

    display: flex;
justify-content: space-around;

    Copy the WHOLE TEXT FILE (this will be a modified version of the theme’s style.css file)

    Go back to the style.css file on Appearence->Editor in your wordpress admin dashboard, and PASTE the WHOLE FILE over the style.css file you had in there, and click UPDATE FILE.

    That should make the proper changes to your file. I didn’t initially realize that you were using a responsive theme, and so certain extra steps needed taking. Let me know if it works.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to make navigation bar links cover the width of the website’ is closed to new replies.