• Resolved gkcpa

    (@gkcpa)


    How do I increase the amount of space between the Navbar and the Breadcrumbs line just below it? I tried adjusting this in header.php and style.css, but was unsuccessful. I don’t think it’s part of the header, but rather the body of the page. The Breadcrumbs style setting is in style.css.

    My page URL is https://garykrupacpa.com/wordpress.

Viewing 5 replies - 1 through 5 (of 5 total)
  • In your theme’s style.css file, find the section for #navbar, which looks like this:

    #navbar {float: left;height: 35px;width: 1000px;padding-top: 7px;padding-bottom: 0px;padding-right: 0px;padding-left: 10px;background-color: #039;font-family: Euphemia, Arial, Helvetica, sans-serif;font-size: 15px;color: #FFF;text-align: center;}

    Add this margin-bottom: 10px; immediately after text-align: center; and before the closing }

    Adjust the space between the navbar and breadcrumbs by increasing or decreasing the 10px.

    Thread Starter gkcpa

    (@gkcpa)

    Thank you, Scott. I tried your suggestion and it worked. Adding the margin-bottom setting also increased the space between the Navbar and the Contact button on the top right, so that they appear the same distance below the Navbar. I hoped to be able to space them independently of each other, consistent with my site’s other pages. Look at my site at https://garykrupacpa.com and you’ll see what I mean. I tried changing the contact button’s style settings a few times since adding the bottom margin to Navbar without success. It’s fine the way it is, since it doesn’t need to be perfect. However, if you know of a way to modify them independently, I’ll be glad to hear about it, and will be sure to try it. If you don’t know of another way, I’ll wait a couple of days and then mark the topic as resolved.

    Sorry, I misunderstood. I thought you wanted the whole line to be shifted down.

    Instead, in your style.css, add margin-top: 300px; (or some other px) to #Breadcrumbs. Note: I didn’t notice the breadcrumbs moving down at all until margin-top was set to >245px.

    The best way to play around with this is to use a browser like Chrome or Firefox, right click the part on the page you want to change select Inspect Element, and edit the styles that show up in the styles box.

    Thread Starter gkcpa

    (@gkcpa)

    Thanks again, and very much Scott! Your solution worked perfectly this time. It’s astonishing how much control you can have over the way your web page looks. In a similar way, or perhaps more so, a painter or photographer has such control over their work. In the case of the Breadcrumbs descriptor, I settled on 270px for margin-top. I had no idea at first that there’d be no increase in spacing with a setting below 245.

    Thanks too for cluing me in to using Inspect Element for editing styles and other code on the fly. I could see how useful it is when I worked on changing the Navbar setting margin-bottom to place the contact button a little closer to the Navbar.

    Thread Starter gkcpa

    (@gkcpa)

    Topic resolved.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How can I increase the amount of space just below Navbar?’ is closed to new replies.