dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: Seeking help with CSS to style this header

  1. #1
    Join Date
    Apr 2017
    Posts
    4

    Seeking help with CSS to style this header

    Please refer to this site. I've added an image of my targeted header in red border below the header. Please help with CSS codes for this.

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,779
    Why not show your existing header code instead of an image of what you desire?
    It would be much easier to help you

  3. #3
    Join Date
    Apr 2017
    Posts
    4

    Header Codes

    Quote Originally Posted by JMRKER View Post
    Why not show your existing header code instead of an image of what you desire?
    It would be much easier to help you
    <?php

    /** Start the engine */



    add_action('genesis_setup','child_theme_setup', 15);
    function child_theme_setup()

    {

    get_stylesheet_directory_uri() . '/style.css';

    add_action( 'genesis_header', 'minhaz_header' );


    function minhaz_header() {

    echo '<div class="header-container">';

    echo '<div class="banner-logo">';
    echo '<img src="/wp-content/themes/Secular-Child/img/logo.png">';
    echo '</div>';

    echo '<div class="middle-text">';
    echo 'PROMOTING';
    echo '</br>';
    echo 'FREETHOUGHTS';
    echo '</br>';
    echo 'INCLUSIVENESS';
    echo '</br>';
    echo 'and';
    echo ' TOLERANCE';
    echo '</div>';


    echo '<div id="searchbar">';
    get_search_form();
    echo '</div>';




    echo '<div class="social-media">';
    echo '<img src="/wp-content/themes/Secular-Child/img/social-media/facebook.png">';
    echo '<img src="/wp-content/themes/Secular-Child/img/social-media/twitter.png">';
    echo '<img src="/wp-content/themes/Secular-Child/img/social-media/linkedin.png">';
    echo '<img src="/wp-content/themes/Secular-Child/img/social-media/meetup.png">';

    echo '</div>';

    echo '<img src="/wp-content/themes/Secular-Child/img/Target-header.png">';



    echo '</div>';




    }


    add_filter( 'genesis_search_button_text', 'wpsites_search_button_icon' );
    function wpsites_search_button_icon( $text ) {
    return esc_attr( 'Search' );
    }

    add_filter( 'genesis_search_text', '__return_false' );








    }

  4. #4
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,779
    That's all PHP.

    Where is your CSS that your are trying to use to adjust the images?
    Also, where (URL) are your images located for testing purposes?

    Also, to preserve the formatting of your code,
    you should place your code between [ code] and [ /code] or [ php] or [ /php] tags
    without the spaces to make it easier for all to analyze.

  5. #5
    Join Date
    Apr 2017
    Posts
    4
    Quote Originally Posted by JMRKER View Post
    That's all PHP.

    Where is your CSS that your are trying to use to adjust the images?
    Also, where (URL) are your images located for testing purposes?

    Also, to preserve the formatting of your code,
    you should place your code between [ code] and [ /code] or [ php] or [ /php] tags
    without the spaces to make it easier for all to analyze.

    First off, thanks so much for your willingness for helping me out.

    I believe the main culprit in my case is the addition of search bar in the header. When I tried the css code "display:inline-block" the whole thing collapsed. Browser displayed nothing. Images used in it are all in godaddy server.

    Below are the final CSS used:

    Code:
    .banner-logo{
    float:left;
    }
    
    .middle-text{
    	font-size:20px;
    
    	}
    
    #searchbar {
    float:right;
    
    width: 220px;
    margin-right: 20px;
    
    
    }
    
    
    .search-form > input {
        height: 40px;
    }
    
    
    .search-form input[type="submit"] {
    background-color: orange;
    	border: none;
    	box-shadow: none;
    	color: #fff;
    	cursor: pointer;
    	padding: 16px 24px;
    	padding: 1.6rem 2.4rem;
    	text-transform: uppercase;
    	margin-left: 0px;
    	width: auto;
            position: absolute;
            size:30px;
    
    }
    
    
    .search-form input[type="submit"]:hover {
            background-color: blue;
    }
    
    
    .search-form input[type="search"] {
    	width: 280px;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles