WordPress.org

Ready to get started?Download WordPress

Forums

Buttercream
Moving the Menu Bar on Top? (10 posts)

  1. chizon
    Member
    Posted 2 years ago #

    Hello!

    I just LOVE this theme. It's so pretty! :) Thanks for making it. Anyway, onto my question:

    Before I attempt to edit the codes, is there an easy way to move the menu bar to the top? :)

    Thanks!

    http://wordpress.org/extend/themes/buttercream/

  2. Caroline Moore
    Member
    Theme Author

    Posted 2 years ago #

    Glad you like the theme! There isn't a way to do this easily but that might make a nice theme option... I'll consider it for a future release!

  3. Lolly27
    Member
    Posted 1 year ago #

    hello ,
    thank you sixhours for this theme. like you can see in my blog Lolly's flavours i use your theme in grey and red. I would like to put the sidebar or the menu on the right . Could you help me to do this? I would like change the color of the font ( little bit more dark because my background is almost the same color) and finally could you create a button twiiter, facebook ... in the same style of your theme ?

    I'm sorry for my bad english.

    Best regards.

    Lolly

    Ps: i would like add music on the left do you think is possible ?

  4. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    Pretty much everything you want is possible but would require extensive CSS customization. I'd suggest posting your request on jobs.wordpress.net if you're not familiar with WordPress/HTML/CSS. I am no longer accepting freelance work so unfortunately I couldn't help with something like this.

  5. bill.boyles
    Member
    Posted 1 year ago #

    an easy way to move the navbar to the top:
    (this is best done with a child theme so that future updates won't erase it, but you could just do it in the original CSS and then never update.)

    find this line of code (starts at line 897):

    .navbar {
    	width: 100%;
    	background-color: #593929;
    	bottom: 0px;
    	z-index: 100;
    	padding: 0px;
    	margin: 0px;
    	border-top: 2px solid #422619;

    change "bottom" to "top" in line 900
    it should now look like this:

    .navbar {
    	width: 100%;
    	background-color: #593929;
    	top: 0px;
    	z-index: 100;
    	padding: 0px;
    	margin: 0px;
    	border-top: 2px solid #422619;

    that's it!
    one note: it may appear the navbar disappears while you are logged into wordpress. this is due to the small top navbar from wordpress that drops down actually covering the very top of the site and thus the theme navbar. log out of wordpress and you will be able to see the navbar has moved to the top!

  6. bill.boyles
    Member
    Posted 1 year ago #

    it may also behoove you to add some padding to the top so the menu does not overlap the header. i accomplished it thusly:
    change the line from

    padding: 0px;

    to

    padding: 10px 0px 20px;

    this will add a 10px padding to the top, 0px to the left and right, and 20px to the bottom to space it off the main body. if you wish to have the header touching the main body do this instead:

    padding-top: 10px;

    hope this all helps!

    to see what my site now looks like with these changes, see http://www.billboyles.info

  7. bill.boyles
    Member
    Posted 1 year ago #

    actually i was viewing it wrong so the above code padding fix doesn't work. it looked like it did when i was logged in, but when i was logged out it didn't. for some reason i cant seem to delete or edit the comment.

  8. bill.boyles
    Member
    Posted 1 year ago #

    finally fixed the code. here is all the code fixed so nothing overlaps and it all looks decent:

    .navbar {
    	width: 100%;
    	height: 30px;
    	background-color: #593929;
    	top: 0px;
    	z-index: 100;
    	padding: 0px;
    	margin: 0px;
    	border-top: 2px solid #422619;
    }
    .searchbar {
    	float: right;
    	padding-top: 4px;
    	padding-bottom: 4px;
    }
    .searchbar input[type="text"] {
    	width: 100px;
    }
    #searchform #searchsubmit {
    	width: 22px;
    	height: 22px;
    	border-radius: 16px;
    	border: 0px none;
    	border-bottom: 0px solid rgba(51,51,51,.2);
    	border-right: 2px solid rgba(51,51,51,.2);
    	font-weight: bold;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	text-transform: uppercase;
    	padding: 0px;
    	color: #fff;

    sorry for all the posts. if i could find a way to edit old posts i would have just done that. hope this helps everyone!

  9. clintonjacob
    Member
    Posted 1 year ago #

    Any way to move the mobile version of the nav bar to the top?

  10. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Clintonjacob, for support with your own issue, create your own thread.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic