• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Magazine Pro- Increase width of menu border lines

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Magazine Pro- Increase width of menu border lines

This topic is: resolved
  • This topic has 9 replies, 3 voices, and was last updated 8 years, 6 months ago by Tonya.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 9, 2014 at 11:36 am #117931
    bizchick200
    Member

    Can someone tell me how to increase the width of the line below the blog title and the line below the secondary menu? I would like the lines to be full width of the page. Also how do I change the style of the lines? I would like to be a gray gradient or shadow instead of solid black lines.

    Here is my site website

    Thanks!

    August 9, 2014 at 12:41 pm #117947
    JanHoek
    Participant

    Open your style.css and find

    .site-header .wrap {
    border-bottom: 2px solid #222;
    padding: 30px 0;
    }
    

    change the border-bottom pixels to whatever you want (this is under your title)

    Then look for

    .nav-secondary .wrap {
    border-bottom: 2px solid #222;
    }

    and do the same.

    Good luck


    Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

    August 9, 2014 at 12:45 pm #117952
    Tonya
    Member

    Absolutely. You want to open up the style.css file and make the following changes:

    line 1058: comment out the border-bottom style as follows (which removes the top border over the nav menu:

    .site-header .wrap {
    /* border-bottom: 2px solid #222; */
    padding: 30px 0;
    }

    on line 1293: comment out the border-bottom style s follows (which remove the border below the nav menu):

    .nav-secondary .wrap {
    /* border-bottom: 1px solid #222; */
    }

    OK, now here is one iteration of a gradient type of border (there are many you can do). Go to line 1987 and add this code in:

    .nav-secondary::before,
    .nav-secondary::after {
    	content: "";
    	height: 3px;
    	background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(147,147,147,1) 50%, rgba(0,0,0,0) 100%);
    	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(147,147,147,1)), color-stop(100%,rgba(0,0,0,0)));
    	background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
    	background: -o-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
    	background: -ms-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
    	background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );
    
    	display: block;
    	margin-bottom: 10px;
        margin-top: 10px;
    }

    You can adjust the "thickness", per sey, of the line via the "height" style. To make it more thin, decrease the number of pixels say to 1 or 2.

    Have fun!
    Tonya 🙂


    Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
    Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

    August 9, 2014 at 2:07 pm #117983
    bizchick200
    Member

    Thank you!! It worked but the line appearance is not really what I wanted. Can you show me how to make the lines appear like the one under the menu of this site

    Thanks!

    August 9, 2014 at 2:12 pm #117986
    JanHoek
    Participant

    Remove the borders from the css we discus earlier. Add the border to......

    .site-header {
       border-bottom: 2px solid #222;
    }
    
    .nav-secondary {
       border-bottom: 2px solid #222;
    }

    Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

    August 9, 2014 at 2:14 pm #117987
    Tonya
    Member

    OK. Thank you for the example site. That helps to see what you want.

    1. Delete what I had you add at line 1988.

    2. Add this code instead:

    .nav-secondary {
    	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1);
    	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1);
    	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1);
    	border-top: 5px solid #ff8584;
    }

    3. Make sure you do the first 2 steps above to give rid of the black lines that are there now.


    Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
    Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

    August 9, 2014 at 2:38 pm #117989
    bizchick200
    Member

    Tonya,

    The bottom border is exactly what I wanted. How do I get the top border to look exactly the same. I didn't want the orange color.

    Thanks for all of your help!

    August 9, 2014 at 2:49 pm #117990
    Tonya
    Member

    Not a problem. Make it look just like this:

    .site-header,
    .nav-secondary {
    	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1);
    	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1);
    	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1);
    }

    Notice that the .nav-secondary::before and border-top are both gone and I added .site-header.

    Cheers!


    Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
    Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

    August 9, 2014 at 2:55 pm #117992
    bizchick200
    Member

    Worked perfectly, Tonya!! Thank you so much. Thanks also, Jan!

    August 9, 2014 at 2:57 pm #117993
    Tonya
    Member

    You're welcome. 🙂 Enjoy your weekend.


    @JanHoek
    Sorry to step on your posts. I didn't see that you had already posted after mine popped. Cheers


    Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
    Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble