Wordpress make Main Menu wide

Humza Arain

Humza Arain

Junior Member
Joined
Jun 3, 2016
Messages
108
Reaction score
4
Hi BHW
I have a website have logo and main menu in the middle of the screen and i want to make it wide....
Please tell me how i can make it while wordpress theme is desinged in php and which while i have to edit to make it wide?




MSG for admins
sorry for posting in wrong Section I was unable to post in Web Designing and i don't know then which is most suitable
so its request to admins move my post in proper section
 
Advertise on BHW
Humza Arain said:
Hi BHW
I have a website have logo and main menu in the middle of the screen and i want to make it wide....
Please tell me how i can make it while wordpress theme is desinged in php and which while i have to edit to make it wide?




MSG for admins
sorry for posting in wrong Section I was unable to post in Web Designing and i don't know then which is most suitable
so its request to admins move my post in proper section
Click to expand...

Asif WILSON Khan said:
request thread moved to web design section
Click to expand...

Thread moved to web design.
 
Humza Arain said:
Hi BHW
I have a website have logo and main menu in the middle of the screen and i want to make it wide....
Please tell me how i can make it while wordpress theme is desinged in php and which while i have to edit to make it wide?




MSG for admins
sorry for posting in wrong Section I was unable to post in Web Designing and i don't know then which is most suitable
so its request to admins move my post in proper section
Click to expand...
Do you have a demo URL, not your site but a demo from where you bought it
 
You can get the yellow pancel plugin for wordpress and try to change it with that. Good luck.
 
It's impossible to tell without looking at the site or at least the code. If you're completely lost in html/css, I think fiverr would be your best bet.
 
BenitoB said:
It's impossible to tell without looking at the site or at least the code. If you're completely lost in html/css, I think fiverr would be your best bet.
Click to expand...
Hire a freelancer on here is much better
 
1.go to your Appearance > theme options or Theme name > Theme options in dashboard and check if there is any navigation option. Change the option from center to right side.

2. Go to page > edit check the right side you can see many options related to page

3.Go to chrome setting and open developer tools. Right click the navigation menu and click inspect you can see the codes. Try modifying it using Appearance > editor.
 
RankBoss said:
1.go to your Appearance > theme options or Theme name > Theme options in dashboard and check if there is any navigation option. Change the option from center to right side.

2. Go to page > edit check the right side you can see many options related to page

3.Go to chrome setting and open developer tools. Right click the navigation menu and click inspect you can see the codes. Try modifying it using Appearance > editor.
Click to expand...
Unfortunately op hasn't mentioned the theme yet, that's what we are waiting for. Not all themes have that option, some need modifying with a child theme
 
blogzandstuff said:
Unfortunately op hasn't mentioned the theme yet, that's what we are waiting for. Not all themes have that option, some need modifying with a child theme
Click to expand...
Most of the themes can be modified with any of these three ways. So I posted if it helps him in any way.
 
RankBoss said:
Most of the themes can be modified with any of these three ways. So I posted if it helps him in any way.
Click to expand...
Don't you agree this thread is in limbo untill we know the theme, it's pure guesswork at the moment
 
The way you make your section wider (full screen) is to simply edit the CSS. Every webpage / website on the net uses a CSS file or stand alone CSS on the page itsself to style the elements of the page. If you do not know about CSS then you can use javascript to access the DOM of the site and change it that way. This is really a very simple fix. Perhaps you should look up a crash course on CSS or higher a freelancer to make the edits for you.

Good luck!!!
 
appProgrammer said:
The way you make your section wider (full screen) is to simply edit the CSS. Every webpage / website on the net uses a CSS file or stand alone CSS on the page itsself to style the elements of the page. If you do not know about CSS then you can use javascript to access the DOM of the site and change it that way. This is really a very simple fix. Perhaps you should look up a crash course on CSS or higher a freelancer to make the edits for you.

Good luck!!!
Click to expand...
I already Tried many things to fix it so basically this problem can be fixed to style.css file right ?
Want me to past header and navigation code here?
 
Check out this style.css code and then me where i can fix this issue

Code: 
/* ------------------------------------------------------------------- */
/* Header
---------------------------------------------------------------------- */
header#main-header {
    height: 80px;
    padding-right: 0;
    background-color: #fff;
    z-index: 9999
}

#logo {
    margin-left: 0;
    display: inline-block;
    float: left;
    margin-top: 15px;
}

#logo img { margin-top: 8px; }
.transparent #logo img { max-height: 60px; }

/* Full-Width Header Styles */
header.full-width .container,
header.full-width .container .sixteen.columns {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    float: left;
    margin: 0;
}

header.full-width #navigation ul.float-right { right: 35px; }

.cloned  #logo { margin-top: 0px; }
/* Alternative Header & Menu style*/
.alternative #navigation {
    width: 100%;
    border-top: 1px solid #e0e0e0;
    margin: 27px 0 0 0;
    padding: 24px 0 12px 0;
}

.alternative #navigation ul {
    margin: 0;
    padding: 0;
}

.alternative .menu ul li { margin: 0 10px 0 0; }

.alternative #navigation ul.float-right { top: 27px; }


/* ---------------------------------- */
/* Transparent Header
------------------------------------- */
header#main-header.transparent {
    position: absolute;
    background: transparent;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: inset 0px -1px 0px 0px rgba(255,255,255,0.2);
}
.admin-bar header#main-header.transparent {
    margin-top: 32px;
}
body.boxed #wrapper { position: relative; }

header.transparent .menu ul li a {
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.5px;
    line-height: 19px;
}

header.transparent .menu ul ul li a {
    color: #959595;   
    font-size: 14px;
    letter-spacing: 0px;
}

header.transparent ul.float-right li a {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
}

header.transparent ul.float-right li a:hover {
    background-color: rgba(255,255,255,0.2);
    color: #fff;
}

header.transparent .menu ul ul li a:hover { color: #fff; }
header.transparent .sf-with-ul::after { color: rgba(255,255,255,0.8); }

#banner.with-transparent-header {
    max-height: 710px;
    background-attachment: fixed;
}
#banner.with-transparent-header.mobilebg {
    background-size: cover;
    background-attachment: initial;
    background-position: center;
}

#banner.with-transparent-header .search-container {
    padding: 190px 0;
    margin-top: 45px;

}

#banner.with-transparent-header:before { background-color: rgba(42, 46, 50, 0.7); }
header.transparent.alternative #navigation { border-top: none; }
header.transparent #logo { border-bottom: none; }

#titlebar.photo-bg.with-transparent-header {
    padding-top:170px;
}
/* Smaller than standard 1180 (devices and browsers) */
@media only screen and (min-width: 960px) and (max-width: 1289px) {
    #banner.with-transparent-header .search-container {  margin-top: 65px; }
}


/* Tablets */
@media only screen and (max-width: 990px) {

    header.transparent.alternative #navigation ul.float-right a {
        color: #fff;
        background: transparent;
    }
    header.transparent #navigation ul.float-right {
        right: -15px;
        top: 15px;
        position: absolute;
        text-align: right;
    }
    header.transparent a.menu-trigger { background: rgba(255,255,255,0.2); }
    header.transparent { box-shadow: none; }
    #banner.with-transparent-header .search-container {  margin-top: 65px; }
}


/* Mobiles */
@media only screen and (max-width: 767px) {
    
    header.transparent #logo { padding-bottom: 0; }
    header.transparent #navigation ul.float-right {
        right: -15px;
        top: 0;
        position: relative;
        text-align: center;
    }

    #banner.with-transparent-header .search-container {
        padding: 190px 0;
        margin-top: 35px;
    }

    #banner.with-transparent-header { max-height: 760px; }
    #logo img {  margin: 35px auto 10px auto; }
    header.transparent #logo img  { margin-top:10px; }

    #titlebar.photo-bg.with-transparent-header {
        padding-top:220px;
    }
}


/* White dropdown for transparent header */
header.transparent .menu ul ul {
    background-color: #fff;
}

header.transparent .menu ul ul:before { color: #fff; }

header.transparent .menu ul li.sfHover ul li a.sf-with-ul,
header.transparent .menu ul ul li a {
    color: #808080;
    background-color: #fff;
}

header.transparent .menu ul ul li a:hover { color: #333; }

/* ---------------------------------- */
/* Sticky Header
------------------------------------- */
.sticky-header.headroom--pinned.cloned,
.sticky-header.headroom--unpinned.cloned,
.sticky-header.headroom--top.cloned {
    transform: translateY(-100%);
    transition: all 0.25s ease-in-out;
}


.sticky-header.cloned {
    background-color: transparent;
    position: fixed !important;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    background-color: #fff;
    border-bottom: none;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.22);
    width: 100%;
    z-index: 999;
    max-height: 80px;
}

.sticky-header.cloned.headroom--not-top.headroom--unpinned,
.sticky-header.cloned.headroom--not-top.headroom--pinned {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    transform: translateY(0%);
}

.sticky-header.cloned .menu ul.float-right,
.sticky-header.cloned .menu ul#responsive {
    margin: 21px 0;
}

.sticky-header.cloned #logo img {
    max-height: 42px;
    width: auto;
    margin: 20px 30px 20px 0;
}

/* ---------------------------------- */
/* Navigation
------------------------------------- */

#navigation { float: left; margin-right: 0; }

#navigation ul.float-right {
    right: 80px;
    top: 0;
    position: absolute;
}

.main-navigation a {
padding: 8px 10px !important;
font-size: 15px !important;
}

#navigation ul.float-right li a i { margin-right: 2px; }

.js .selectnav { display: none; }

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 700;
    text-transform: uppercase;
    margin: 26px 0 0 25px;
    max-width: 750px
}
.alternative .menu ul#responsive  {
    max-width: 100%;
}

.menu ul li {
    position: relative;
    margin-left:10px;
    padding: 0;
}

.menu ul ul {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 100;
    width: 200px;
    letter-spacing: 0;
}

.menu > ul li { float: left; }
.menu ul li:hover > ul { display: block; }

.menu ul a {
    display: block;
    position: relative;
}

.menu ul ul ul {
    top: 0;
    left: 100%;
}


/* Main Styles */
.menu ul a { text-decoration: none; }

.menu ul > li > a {
    color: #333;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    padding: 0;
    overflow: hidden;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.menu ul > li.current-menu-item > a,
.current-menu-item > a{  color: #fff; }
.current-menu-item > a.sf-with-ul:after { color: #fff; }

.menu ul ul li a,
.menu ul li.sfHover a.sf-with-ul:after,
.menu ul li a {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

ul.float-right li a {
    background-color: #f0f0f0;
    color: #333;
 }

ul.float-right li a:hover,
.menu ul li.sfHover a.sf-with-ul,
.menu ul li.current-menu-parent > a,
.menu ul li a:hover {
    color: #fff;
}


/* Drop-Down */
.menu ul ul {
    background-color: #282828;
    z-index: 999;
    margin: 0 0 0 0;
    padding: 14px 0;
    border-top: 10px solid inherit;
}

.menu ul ul:before {
    font-family: "FontAwesome";
    content: "\f0d8";
    font-size: 23px;
    color: #282828;
    display: block;
    position: absolute;
    top: -11px;
    left: 13px;
}

.menu ul ul ul:before { content:"";}

.menu > ul ul li:hover > a {
    border-bottom: 0;
    background: transparent;
}

.menu ul ul li {
    margin: 0;
    padding: 0;
    width: 100%;
}

.menu ul li.sfHover ul li a.sf-with-ul,
.menu ul.menu ul li a {
    font-weight: 500;
    text-transform: none;
    color: #9f9f9f;
    font-size: 14px;
    line-height: 19px;
    padding: 5px 18px !important;
    border: 0;
    margin-bottom: 0;
    background-color: #282828;
}


.menu ul ul li:first-child { border: none; }

.menu ul ul li a:hover,
.menu ul li.sfHover ul li a.sf-with-ul:hover { color: #fff; }

.menu ul ul ul {
    margin: 0 0 0 3px;
    border: none;
}

.sf-with-ul:after {
    content: "\f107";
    font-family: "FontAwesome";
    font-size: 14px;
    margin: 0 0 0 7px;
    top: 0;
    position: relative;
    width: 9px;
    height: 5px;
    display: inline-block;
    color: rgba(0,0,0,0.4);
    float: right;
    font-weight: 500;
}

ul li ul a.sf-with-ul:after {
    right: 9px;
    top: 4px;
    position: absolute;
    content: "";
}
.menu ul li.current-menu-parent a.sf-with-ul:after,
.menu ul li.sfHover a.sf-with-ul:after { color: #fff; }
.menu ul li ul a.sf-with-ul:after { color: #888 !important; }


/* ------------------------------------------------------------------- */
/* Mobile Navigation
---------------------------------------------------------------------- */
#mobile-navigation { display: none; }

@media only screen and (max-width: 990px) {

    #mobile-navigation { display: block; }

    #responsive { display: none; }

    a.menu-trigger,
    a.menu-trigger i {
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    a.menu-trigger {
        color: #fff;
        background-color: #282828;
        display: block;
        float: left;
        z-index: 100;
        position: relative;
        margin: 0 0 30px 0;
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 600;
    }

    a.menu-trigger:hover {
        color: #fff;
        background-color: #505050;
    }

    a.menu-trigger i {
        font-size: 18px;
        padding: 17px 17px 18px 17px;
        margin: 0px 10px 0px 0px;
        background-color: rgba(255,255,255, 0.08);
        font-weight: 500;
    }

    a.menu-trigger:hover i { background-color: rgba(0, 0, 0, 0.08);  }

    body[data-menu-position="open"] a.menu-trigger i.fa.fa-reorder:before { content:""; }
    body[data-menu-position="closed"] a.menu-trigger i.fa.fa-reorder:before { content:""; }

    #navigation ul.float-right {
        position: relative;
        text-transform: uppercase;
        font-weight: 600;
        display: inline-block;
        width: 100%;
        right:0;
    }

    #navigation { float: none; }
    
    #navigation ul.float-right a {
        color: #333;
        margin: 20px 25px 20px 0;
        display: inline-block;
        font-size: 14px;
    }   
    #navigation ul.float-right a.button {
        color: #fff;
    }

    #navigation ul.float-right a:hover {
        color: #333;
        margin: 20px 25px 20px 0;
        display: inline-block;
        font-size: 14px;
        background-color: transparent;
    }


    ul.float-right li {
        display: inline-block;
        
    }

    #logo {
        width: 100%;
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 27px;
    }
}

.fullwidthbanner-container { z-index: 5; }
#jPanelMenu-menu { background-color: #282828; z-index:999999 !important; }
#jPanelMenu-menu ul { text-transform: none; }
#jPanelMenu-menu li,
#jPanelMenu-menu ul li {
    margin: 0px;
    padding: 0px;

}
#jPanelMenu-menu.menu ul > li > a {
    margin-bottom: 0px;
    font-size: 16px;

}
#jPanelMenu-menu .current-menu-item:after,
#jPanelMenu-menu .sf-sub-indicator { display: none; }

#jPanelMenu-menu li a {
    display:block;
    padding: 12px 20px !important;
    background-color: #333;
    color: #aaa;
    font-weight: 500;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    outline: none;
    line-height: 21px;
}

#jPanelMenu-menu .current-menu-item > a,
#jPanelMenu-menu .current-menu-parent > a,
#jPanelMenu-menu li a:hover { background-color: #505050; color: #fff; }

#jPanelMenu-menu li li a {
    background-color: #282828;
    padding-left: 30px !important;
}
 
Humza Arain said:
I already Tried many things to fix it so basically this problem can be fixed to style.css file right ?
Want me to past header and navigation code here?
Click to expand...

You can change the look of any website using the css style sheet. Tell you what buddy. Shoot me the link of your site and I will tell you what to edit to make the menu full screen. Ill just post the code in a code block for you. I can not tell you what to change by simply looking at your CSS file...... I have about 15 years experience as a web developer. Shoot me your link and I'll try to help you.
 
Humza Arain said:
I already Tried many things to fix it so basically this problem can be fixed to style.css file right ?
Want me to past header and navigation code here?
Click to expand...
May be easier to hire a freelancer, your site is ok on a mobile. Make sure any changes you make are in a child theme otherwise they will be lost next update
 
blogzandstuff said:
May be easier to hire a freelancer, your site is ok on a mobile. Make sure any changes you make are in a child theme otherwise they will be lost next update
Click to expand...
currently Child team is activated
Actually I can't hire Freelancer now I'm on tight budget right now thats why
if you can tell me that part of css code which is causing this issue so maybe i could fix it
code is posted already on top
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top