Move Navigation Links from the Left to the Top

michaelvqs said 1 year ago:

I would like to change the location of the navigation links and move it to the top just below the page title banner and before the first container. I know this has to be done in the CSS file. I’ve spent a a lot of time researching this and playing with the code in the CSS file but I can’t figure it out. Can someone in this forum point me to specific examples done with Website tonight? I know this has been done before and people have posted about it but I can’t find those posts now.

I want by navigation to look something like this example here: http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced
but I can’t figure out how or where to place this code in the website tonight CSS file. Can anyone help me? Do I need to pay a consultant to do this?

All I’ve been able to figure out so far (after many, many hours) is adding the “Main Navigation” box you see above the links. I can’t even figure out how to move these links to the top, below the title page banner.

Then, I would want to stretch out the remaining content across the width of the page. About 10-15% of the page on the left is wasted because of that navigation widget at the top.

Gary A said 1 year ago:

@michaelvqs

By default, the location of the navigation bar is determined by the template you are using. Before you begin working with CSS, you may want to take another look through the templates to see if there is already a template that better meets your needs.

When making CSS changes to the site, it is done in a particular location. Information on working with CSS can be reviewed here:

http://support.godaddy.com/help/4229/editing-css-with-website-tonight

As each template is different, it’s hard to give advice as to what would need to be changed to do what you described. You will need to take a look through the Navigation portion as well as the content portion of the CSS to determine what you would need to update. If you can provide a link to your site and the name of the template you are trying to modify, a member of the Forums may be able to take a look at it and assist you further with that information.

-Gary

michaelvqs said 1 year ago:

Thank you Gary. I think I’ve browsed through that link you provided and, like much info on the website tonight pages, is not very helpful. I need more info than “From the Edit view of CSS file section (bottom section), make your edits to the text.”. I’m trying to figure out what edits I need to make!

I’ve looked through all the templates and didn’t like any of them so I went with the clean slate version. So by default the navigation links on on the left. I’m sure there is a string of code that can be inserted in one or more specific spots in the CSS file to get me what I want.

So the template I started with is the basic, or clean slate version (forget exactly what it was named) and my url is: http://www.casadoschivos.com.

Again, I would love to get somewhere close to this example I found on-line: http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced

I would like to move the navigation links to just below the title page block and before the first block of text. Then, once the navigation links are moved, I would like to re-size the remaining content so that it spans across the page horizontally.

michaelvqs said 1 year ago:

Maybe it would forum experts if I also listed the few few lines of the CSS code:

/*———————————-
Theme665
———————————-*/
h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
}

I think the navigation links are in the h3 region.

Gary A said 1 year ago:

@michaelvqs

If you are using the Clean Slate template, there is another template called “Clean Start” that is the same except that the navigation bar is horizontal across the top, below the main heading. This template may better meet your needs. You can always backup your site, try the Clean Start template, and test it. If that template doesn’t work for you, you can switch the template back or restore your backup. Information on working with backup can be found in this article:

http://support.godaddy.com/help/2992/backing-up-or-restoring-your-website

If the Clean Start template isn’t working for you, we can take another look at modifying the Clean Slate template.

-Gary

michaelvqs said 1 year ago:

Thanks Gary. I’ll give this a try (if I can find this template) and report back to the forum.

michaelvqs said 1 year ago:

Thanks for the tip Gary. I like this template much better!
http://www.casadoschivos.com I am about 90% satified with my website design. Hooray!

Questions:

The navigation links are much better and I could live with them as-is but…I would still like to move the navigation links a little more to the right or even center the text links. Also, would still like to put them in a box/block with a background color. How can I do this? I think this is fidgeting with the CSS and I still can’t figure it where it goes. I’ve tried modifying the code in this section of the CSS

/* sidebar Left */

.sf_region3 {
float: left;
width: 180px;
overflow: hidden;
margin: 1;
position: relative;
}

.sf_region3 .widget {
margin: 20px 0;
}

—————————————————-
But with no luck. Any suggestions?

Also, how can I make the background color of the footer block transparent? It is currently set as white and so it doesn’t look so good on the “Where is Vieques” page. Can I do this with html in the block? I’ve tried various tags so far with no luck.

Thanks again for your help.

michaelvqs said 1 year ago:

OK, I figured out my second question about the footer block background so ignore that one.

michaelvqs said 1 year ago:

Even editing the navigation links so they appeared something along the lines of this example would be great: http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float

I’ve experimented in inserting the CSS at various points in the CSS file where it looked relevant to the navigation links. So far no luck. Any suggestions or ideas?

michaelvqs said 1 year ago:

Just wondering if anyone can assist me in editing my CSS so that the navigation links display in block-style with background color. Here’s an example of what I’m looking for:

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_advanced

I have experimented with editing my CSS to add these codes but to no avail – I just can’t seem to figure out where and in what order these commands go in my CSS file. I think the navigation links are in region 3 in the CSS file but that’s about as far as I’ve gotten with this.

http://www.casadoschivos.com

Gary A said 1 year ago:

@michaelvqs

I’m glad to hear that you were able to work out some of what you described. If you are still working with the navigation links, I have included a pretty basic implementation of what you described below. You should just be able to paste this into the CSS section of your WebSite Tonight and it should take effect.

.nav a{
background-color:#98bf21;
margin:5px;
}
.nav a:hover,a:active{
background-color:#7A991A;
}
.sf_navigation ul li a {
padding: 3px 5px 3px 5px;
}
.sf_navigation{/*this should center the navigation*/
margin:auto;
}

This should pretty much cover what displayed in the link you provided. You can adjust the color and the padding to better meet your needs if desired, I just used the colors from the example. The last bit should center the navigation on your site, but it may not depending on a variety of other aspects. You could always just manually adjust the margin to make it flush with the rest of the text on your site.

-Gary

michaelvqs said 1 year ago:

Thanks Gary. Do I have to delete and/or replace any of the current CSS code with this new code? Or do I just add it to the existing CSS code?

Gary A said 1 year ago:

@michaelvqs

You should just be able to add that CSS to the bottom of the CSS that you can edit. Due to how CSS works, CSS further down the file overwrite previous CSS declarations. You should not need to otherwise edit or remove any other CSS.

-Gary

michaelvqs said 1 year ago:

@GaryA: Thanks! I had already inserted the string somewhere in the middle and it seems to work ok except for margin:auto; – the navigation links are still left-justified. Do you think it would make any difference if I move the entire string to the end? Or should I just leave it alone?

Gary A said 1 year ago:

@michaelvqs

The location in your CSS would only be important if you also made edits to that particular CSS section. You can try moving that section to the bottom to see if that resolves the issue. Otherwise, you might want to try manually setting the margin, such as margin-left:30px; to see if that works better for you.

-Gary