Beautiful theme – moving and changing background image and navigation bar

Community Forums Forums Design Tips and Tricks Beautiful theme – moving and changing background image and navigation bar

This topic is: not resolved

This topic contains 5 replies, has 3 voices, and was last updated by  rfmeier 6 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #86691

    stephday
    Member
    Post count: 4

    Hi All,

    I am trying to set up a website for the lab I work in and am having a few issues with the Beautiful theme: ISI Learn

    1. The image I have is smaller than what the background image default code is sized to. I don’t have a larger file of the image, so I would like to resize the space for the background image to better accommodate the image we want to use. The size of the image is 175×1150. I tried to stretch the height of my image to fit (which is what is has now), but it is obviously not the best option.

    2. The navigation bar: I figured out how to hide the header, but now I want to center the navigation bar. I currently have it in the header widget so it is aligned to the right. We want it to be how it is here: http://sarahmae.com

    3. We are also toying with moving the menu below the image as it is an option in the theme, but if we do end up doing that, how do I get rid of the gray background?

    Really appreciate any help someone can give us!

    • This topic was modified 7 months, 1 week ago by  stephday.
    • This topic was modified 7 months, 1 week ago by  stephday.
    • This topic was modified 7 months, 1 week ago by  stephday.
    • This topic was modified 7 months, 1 week ago by  stephday.
    http://isilearn.net
    #86720

    rfmeier
    Participant
    Post count: 596

    Helo,

    #1. Are you looking to reduce the size of the background so the image will fit a little better? I tried a stab at it below:

    .custom-background .site-header-banner {
        background-size: 1150px 175px;
    }
    
    .beautiful .site-header-banner {
    	height: 175px;
    	width: 1150px;
    	margin: 0 auto;
    }

    It reduces the size of the image and centers it.

    #2. I was able to center the navigation with Chrome tools. Try pasting this css below at the end of your style.css file.

    .title-area {
        display: none;
    }
    
    .site-header .widget-area {
    	float: none;
    	text-align: center;
    	width: 100%;
    }

    #3. It may be my monitor(s). but I cannot see the gray background. When I find it, I am sure it can be changed with css.

    I hope this helps. Let me know.


    #89968

    ChrisD
    Member
    Post count: 5

    Hello!

    I’m really struggling with the same issue – centering the navigation. The code pasted at the bottom of the CSS does not change the site, but pasted under the Title Area section it turns the menu into a bulleted list. Is there another section where I could try to paste this code? Thanks!

    http://www.buffydekmarblog.com/photographers

    Chris

    #89971

    rfmeier
    Participant
    Post count: 596

    Chris,

    The code above has nothing to do with the navigation menus. To center the navigation you will need to add a rule to the navigation menu in your style.css file.

    Around line ~953 add text-align: center; to get the following;

    /*
    Site Navigation
    ---------------------------------------------------------------------------------------------------- */
    
    .genesis-nav-menu {
    	clear: both;
    	color: #666;
    	font-family: 'Lato', sans-serif;
    	font-size: 16px;
    	line-height: 1.5;
    	width: 100%;
    	text-align: center;
    }

    Here is the result I was able to get https://s3.amazonaws.com/uploads.hipchat.com/61944/453094/jxwoEmZoxZkIc2H/centered-navigation.png


    #89976

    ChrisD
    Member
    Post count: 5

    @rfmeier- thank you for the quick reply and spot on diagnosis. Many thanks!

    • This reply was modified 6 months, 3 weeks ago by  ChrisD.
    • This reply was modified 6 months, 3 weeks ago by  ChrisD.
    #89990

    rfmeier
    Participant
    Post count: 596

    Glad I could help. Good luck.


Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.