Comment form 'success' message goes to top of page but is hidden by fixed header

Question

When you submit a comment on a blog article (for example, on http://helloarchie.blue/posts/fashion-friday-6), the page refreshes with a 'success' message above the form.

Now that I have a fixed header on my layout, the success message is showing behind it therefore the user can't see it and doesn't realize their comment has gone through.

I'm using Anchor CMS so it's difficult to find all of the CSS etc. that's being used as it's in lots of different places but here's the CSS I can find related to the notifications and no matter what I try, I can't seem to push it down below that fixed header.

PHP

// form elements
function comment_form_notifications() {
return Notify::read();
}

function comment_form_url() {
return Uri::to(Uri::current());
}

function comment_form_input_name($extra = '') {
return '<input name="name" id="name" type="text" ' . $extra . '     value="' . Input::previous('name') . '">';
}

function comment_form_input_email($extra = '') {
return '<input name="email" id="email" type="email" ' . $extra . '     value="' . Input::previous('email') . '">';
}

function comment_form_input_text($extra = '') {
return '<textarea name="text" id="text" ' . $extra . '>' .     Input::previous('text') . '</textarea>';
}

function comment_form_button($text = 'Post Comment', $extra = '') {
return '<button class="btn" type="submit" ' . $extra . '>' . $text . '</button>';
}

PHP

<?php

class Notify {

public static $types = array('error', 'notice', 'success', 'warning');
public static $wrap = '<div class="notifications">%s</div>';
public static $mwrap = '<p class="%s">%s</p>';

public static function add($type, $message) {
    if(in_array($type, static::$types)) {
        $messages = array_merge((array) Session::get('messages.' .   $type), (array) $message);

        Session::put('messages.' . $type, $messages);
    }
}

public static function read() {
    $types = Session::get('messages');

    // no messages no problem
    if(is_null($types)) return '';

    $html = '';

    foreach($types as $type => $messages) {
        foreach($messages as $message) {
            $html .= sprintf(static::$mwrap, $type, implode('<br>',     (array) $message));
        }
    }

    Session::erase('messages');

    return sprintf(static::$wrap, $html);
}

public static function __callStatic($method, $paramaters = array()) {
    static::add($method, array_shift($paramaters));
}

}

<?php

class Migration_add_comment_notifications extends Migration {

public function up() {
    $table = Base::table('meta');

    if($this->has_table($table)) {
        if( ! Query::table($table)->where('key', '=',   'comment_notifications')->count()) {
            Query::table($table)->insert(array(
                'key' => 'comment_notifications',
                'value' => 0
            ));
        }
    }
}

public function down() {}

}

CSS

.notifications {
margin-bottom: 10px;
}

.notifications .notice, .notifications .error, .notifications .success     {
    padding: 10px 18px;
    margin-bottom: 20px;

    font-size: 13px;
    line-height: 21px;
    font-weight: 500;

    border-radius: 5px;
}

.notifications .notice {
    color: #fff;
    background: #578cd9;
}

.notifications .error {
    color: #fff;
    background: #d34937;
}

.notifications .success {
    color: #fff;
    background: #64a524;
}


.header .notifications {
position: absolute;
left: 55%;
top: 182px;
z-index: 1200;
width: 320px;
}
.header .page .notifications {
left: 48%;
}
.header .notifications div:after {
    content: '';
    position: absolute;
    display: block;
    top: -6px;
    right: 50px;

    border-bottom: 6px solid #64a524;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.header .notifications .error:after {
    border-bottom-color: #d34937;
}

Answer 1

Give the z-index to the success div more than the header.