adding code for fixed bar for scrolling

  • nonamer

    (@localgreeneats)


    10 years ago

    I am using this
    .secondary-menu {
    height: 20px;
    width: 90%;
    position: fixed;
    top: 0;
    }

    to have a fixed bar for scrolling but on some pages it doesn’t look very nice with a black background. Any ideas on how to fix this?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Jake

    (@jakewpsupport)

    10 years ago

    Hi @localgreeneats,

    The website is at http://www.localgreeneats.com/, correct?

    After inspecting your site, I was confused because I did not see any “black background”. I did notice however that when scrolling, your content <header> is fixed position with a white background, and this looks kinda strange. Currently, the secondary menu is not set to fixed position, but if you change this, you may want to change the background color if it looks strange with a black background.

    .secondary-menu {
background: ??????;
}

    Another thing I noticed that seems strange to me is that your main navigation menu is using the .secondary-menu class. Is there not a primary menu option with your theme? Though not necessary, convention usually has this menu as the primary, and maybe use the secondary as an auxiliary menu.

    Thread Starter nonamer

    (@localgreeneats)

    10 years ago

    Thanks for the feedback Jake.

    I was using
    .secondary-menu {
    height: 20px;
    width: 90%;
    position: fixed;
    top: 0;
    }

    to have a fixed menu but since it didn’t look very appealing, I got rid of it.

    Ideally what I want to do is create a fixed menu for my menu bar (home, contact us, services…. buttons).

    But in addition to that fixed menu, I also want to have a fixed banner/header for the blog page only, hence the current code

    header {
    position: fixed;
    width: 1150px;
    padding: 15px, 0;
    margin: 0;
    text-align: center;
    font-size: 10px;
    line-height: -10px;
    height: 208px;
    top: 0;
    background: white;
    color: #fff;
    font-family: ‘PT Sans’, sans-serif;
    }

    Ideally I want to only display this fixed banner/header on the blog page ( with additions of image & text).

    Thread Starter nonamer

    (@localgreeneats)

    10 years ago

    Your points are very valid, however I don’t know how to set the secondary menu as primary menu so that’s the problem.

    “Currently, the secondary menu is not set to fixed position, but if you change this, you may want to change the background color if it looks strange with a black background.”
    How do I change the background color as well as move secondary menu to primary to reflect the changes?

    Thanks for your help

    Thread Starter nonamer

    (@localgreeneats)

    10 years ago

    This is also why I’ve inquired for removing sticky header from all pages, but one: https://ww.wp.xz.cn/support/topic/removing-sticky-header-from-certain-pages?replies=4

    Jake

    (@jakewpsupport)

    10 years ago

    Depending of course on what theme you’re using, you may be able to utilize the WordPress custom header feature. Log into the Dashboard/admin area and go to Appearance/Header, then select an image for the custom header (if supported). You could then specify with css to display or not display the header on specified pages.

    Jake

    (@jakewpsupport)

    10 years ago

    In your admin area, you may want to go to Appearance/Menu to see if you can setup a primary menu…it just seems odd if the theme has a secondary menu but not primary.

    Jake

    (@jakewpsupport)

    10 years ago

    To remove styles from all pages but one, you well probably want to set a display: none “globally” or to all the pages, and then a display: block to the one page you want it to show. Also, just wanted to make sure you’re using a child theme to make these changes, so when you upgrade your theme they won’t be lost.

    Thread Starter nonamer

    (@localgreeneats)

    10 years ago

    Unfortunately moving the menu to primary section, it no longer is viewable. I may have to move it back down to “below header” as its original location.

    I am making these changes in the child theme (or what I know as the css in the editor).

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘adding code for fixed bar for scrolling’ is closed to new replies.